/* OVI design system v0.1 — tokens from the approved style tile */
:root{
  color-scheme: light;
  --ink:#17171C; --text:#212121; --muted:#73738A; --muted2:#9B9AAA; --white:#FFFFFF;
  --paper:#F0EEE9; --panel:#FAFAFA; --panel2:#F2F2F2; --line:#E2E0DA; --line2:#D6D3CB;
  --red:#D23019; --red-hover:#B92814; --red-deep:#3B0F0B; --red-mid:#8F2014; --blush:#F7DCD5; --blush2:#FBEDE9;
  --lilac:#D18EE2; --lilac-t:#F3E3F7; --cobalt:#4C6EE6; --cobalt-t:#E3E9FB; --sage:#9DB3A6; --sage-t:#E4ECE7; --khaki:#8C8370; --khaki-t:#EEEBE3; --night:#061324;
  --pass:#2F6B4F; --pass-t:#E1EEE6; --warn:#946A12; --warn-t:#F5ECD6; --fail:#D23019; --fail-t:#FBE6E1;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --slant:18deg; --seam:6px; --side:248px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper);color:var(--text);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;line-height:1.4}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Seamed buttons (approved) ---------- */
.split{display:inline-flex;align-items:stretch;gap:var(--seam);border:0;padding:0;background:none;cursor:pointer;text-decoration:none;--bg:var(--red);--bgh:var(--red-hover);--fg:#fff;--h:40px;transition:gap .18s ease;flex:none}
.split .seg{position:relative;isolation:isolate;display:flex;align-items:center;height:var(--h);color:var(--fg);font-family:var(--display);font-size:15px;white-space:nowrap}
.split .seg::before,.split .seg::after{content:"";position:absolute;top:0;bottom:0;background:var(--bg);border-radius:7px;z-index:-1;transition:background .18s}
.split .lab{padding:0 26px 0 16px}
.split .lab::before{left:0;right:12px}
.split .lab::after{right:6.5px;width:34px;transform:skewX(calc(var(--slant)*-1))}
.split .ico{width:calc(var(--h) + 4px);justify-content:center;padding-left:8px}
.split .ico::before{left:12px;right:0}
.split .ico::after{left:6.5px;width:34px;transform:skewX(calc(var(--slant)*-1))}
.split .ico svg{width:16px;height:16px;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.split:hover{gap:10px;--bg:var(--bgh)}
.split:hover .ico svg.plus{transform:rotate(90deg)}
.split:hover .ico svg.arr{transform:translateX(3px)}
.split:active .seg{transform:translateY(1px)}
.split.ink{--bg:var(--ink);--bgh:#000}
.split.lg{--h:52px}.split.lg .seg{font-size:17px}.split.lg .lab{padding:0 32px 0 22px}
.split.lg .lab::after,.split.lg .ico::after{width:40px}
.split.lg .lab::after{right:8.5px}.split.lg .ico::after{left:8.5px}
.split[disabled]{opacity:.45;cursor:not-allowed}
.mrect{display:inline-flex;align-items:stretch;height:34px;border:1.25px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;padding:0;transition:background .16s,color .16s;flex:none}
.mrect>span{display:flex;align-items:center;padding:0 12px;white-space:nowrap}
.mrect .ar{border-left:1.25px solid currentColor;padding:0 9px}
.mrect svg{width:13px;height:13px;transition:transform .2s}
.mrect:hover{background:var(--ink);color:#fff}
.mrect:hover svg{transform:translateX(2px)}
.mrect.sm{height:28px}
.toggle{display:inline-flex;gap:4px;--h:32px;flex:none}
.toggle button{position:relative;isolation:isolate;height:var(--h);border:0;background:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer;--bg:#E4E1DA;white-space:nowrap}
.toggle button::before,.toggle button::after{content:"";position:absolute;top:0;bottom:0;background:var(--bg);border-radius:6px;z-index:-1;transition:background .16s}
.toggle .l{padding:0 22px 0 13px}.toggle .l::before{left:0;right:10px}.toggle .l::after{right:5px;width:26px;transform:skewX(calc(var(--slant)*-1))}
.toggle .m{padding:0 20px 0 22px}.toggle .m::before{left:5px;right:5px;transform:skewX(calc(var(--slant)*-1))}.toggle .m::after{display:none}
.toggle .r{padding:0 13px 0 22px}.toggle .r::before{left:10px;right:0}.toggle .r::after{left:5px;width:26px;transform:skewX(calc(var(--slant)*-1))}
.toggle button[aria-pressed="true"]{color:#fff;--bg:var(--ink)}
.toggle button:not([aria-pressed="true"]):hover{--bg:#D9D5CC}
.icon-btn{width:32px;height:32px;border-radius:6px;border:0;background:transparent;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink)}
.icon-btn:hover{background:var(--panel2)}
.icon-btn svg{width:18px;height:18px}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;font:inherit}
.link:hover{text-decoration-color:var(--red)}

/* ---------- chips / tags / status ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:2px 7px;border-radius:4px;white-space:nowrap;line-height:1.5;border:0}
.c-live{background:var(--pass-t);color:var(--pass)}
.c-cand{background:var(--warn-t);color:var(--warn)}
.c-draft{background:var(--panel2);color:var(--muted)}
.c-arch{background:transparent;color:var(--muted2);border:1px solid var(--line)}
.c-high{background:var(--fail-t);color:var(--fail)}
.c-med{background:var(--warn-t);color:var(--warn)}
.c-low{background:var(--khaki-t);color:#5F5846}
.c-pass{background:var(--pass-t);color:var(--pass)}
.c-fail{background:var(--fail-t);color:var(--fail)}
.c-lilac{background:var(--lilac-t);color:#6B3A78}
.c-cobalt{background:var(--cobalt-t);color:#2B47A8}
.c-sage{background:var(--sage-t);color:#36574A}
.c-khaki{background:var(--khaki-t);color:#5F5846}
.c-sim{background:var(--blush);color:var(--red-deep)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.score{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sc-good{color:var(--pass)}.sc-mid{color:var(--warn)}.sc-bad{color:var(--fail)}

/* ---------- Login ---------- */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--white)}
.login-art{background:var(--red);color:#fff;padding:40px 56px 48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:560px}
.login-art .word{font-family:var(--display);font-weight:500;font-size:30px;letter-spacing:-.02em}
.login-art h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,6.4vw,96px);line-height:1;letter-spacing:-.02em;margin:0;max-width:9ch;position:relative;z-index:1}
.login-art .loop{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1;max-width:520px}
.login-art .loop span{background:rgba(255,255,255,.14);padding:4px 8px;border-radius:4px}
.login-art canvas{position:absolute;right:-40px;top:70px;width:min(62%,560px);height:auto;opacity:.95}
.login-form{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(24px,6vw,96px);gap:28px;max-width:620px}
.login-form h2{font-family:var(--display);font-weight:400;font-size:40px;letter-spacing:-.02em;margin:6px 0 0;line-height:1.1}
.field{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line2);border-radius:8px;padding:8px 12px 9px;background:var(--white);transition:border-color .15s}
.field:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{border:0;outline:0;background:transparent;padding:0;font-size:15px;width:100%}
.field.err{border-color:var(--red)}
.field-err{font-family:var(--mono);font-size:11px;color:var(--red);margin-top:-18px}
.demo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo button{border:1px solid var(--line2);background:var(--panel);border-radius:10px;padding:14px 16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.demo button:hover{border-color:var(--ink);background:var(--white)}
.demo b{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:-.01em}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-art{min-height:380px;padding:28px 20px 32px}.login-art canvas{width:70%;top:40px}.demo{grid-template-columns:1fr}}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100%}
.sidebar{background:var(--white);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:18px 12px 14px;gap:18px}
.brand{display:flex;align-items:baseline;justify-content:space-between;padding:0 8px}
.brand .word{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.brand .mono{color:var(--muted);font-size:10px}
.org{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--panel)}
.org .av{width:30px;height:30px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:13px}
.org b{font-weight:500;display:block;font-size:13.5px;line-height:1.2}
.org small{color:var(--muted);font-size:12px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .mono{color:var(--muted);padding:8px 10px 6px;font-size:10.5px}
.nav button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;color:var(--text);font-size:14px;position:relative}
.nav button:hover{background:var(--panel)}
.nav button .ind{width:7px;height:7px;border-radius:50%;background:transparent;flex:none}
.nav button[aria-current="page"]{color:var(--ink);font-weight:500;background:var(--panel)}
.nav button[aria-current="page"] .ind{background:var(--red)}
.nav button .later{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted2);letter-spacing:.04em}
.nav button .cnt{margin-left:auto;font-family:var(--mono);font-size:10.5px;background:var(--fail-t);color:var(--fail);padding:0 6px;border-radius:4px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--line);padding-top:14px}
.me .av{width:30px;height:30px;border-radius:50%;background:var(--blush);color:var(--red-deep);display:grid;place-items:center;font-size:12px;font-weight:500}
.me b{font-weight:500;font-size:13px;display:block;line-height:1.2}
.me small{font-size:12px;color:var(--muted)}
.side-links{display:flex;gap:12px;padding:0 10px;flex-wrap:wrap}
.side-links button{font-size:12px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(240,238,233,.92);backdrop-filter:blur(8px);display:flex;align-items:center;gap:12px;padding:12px 32px;border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);min-width:0}
.crumbs .mono{font-size:11px}
.ucsel{position:relative}
.ucsel>button{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);background:var(--white);border-radius:8px;padding:6px 10px 6px 12px;cursor:pointer;min-width:0}
.ucsel>button:hover{border-color:var(--ink)}
.ucsel>button b{font-weight:500;white-space:nowrap}
.ucsel>button svg{width:14px;height:14px;color:var(--muted)}
.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--white);border:1px solid var(--line2);border-radius:12px;padding:6px;min-width:320px;box-shadow:0 18px 40px -18px rgba(23,23,28,.35)}
.menu .mono{color:var(--muted);padding:8px 10px 4px;font-size:10px}
.menu button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:0;background:none;border-radius:8px;padding:9px 10px;cursor:pointer;text-align:left}
.menu button:hover,.menu button[aria-selected="true"]{background:var(--panel)}
.menu button small{color:var(--muted);font-size:12px;display:block}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-btn{display:none}
.content{padding:36px 32px 64px;display:flex;flex-direction:column;gap:28px;max-width:1440px;width:100%}
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:60;transform:translateX(-102%);transition:transform .22s ease;box-shadow:20px 0 40px -20px rgba(0,0,0,.3);padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .app.nav-open .sidebar{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(23,23,28,.3);z-index:55}
  .menu-btn{display:inline-grid}
  .topbar{padding:10px 16px}
  .content{padding:24px 16px 48px}
  .crumbs .co{display:none}
  .top-right .sim-tag{display:none}
}

/* ---------- Page header ---------- */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.phead .eyebrow{color:var(--red)}
.phead h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,48px);line-height:1.05;letter-spacing:-.02em;margin:8px 0 0}
.phead p{margin:10px 0 0;max-width:620px;color:var(--text)}
.phead .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- Panels & tables ---------- */
.panel{background:var(--white);border-radius:14px;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px;flex-wrap:wrap}
.panel-h h2{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.01em;margin:0}
.panel-h .mono{color:var(--muted)}
.panel-b{padding:0 20px 20px}
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px}
table.t th{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--white)}
table.t td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr.row{cursor:pointer;transition:background .12s}
table.t tbody tr.row:hover{background:var(--panel)}
table.t td.r,table.t th.r{text-align:right}
table.t .uc-name{font-weight:500;color:var(--ink)}
table.t .sub{display:block;color:var(--muted);font-size:12px}

/* Workflow loop */
.loop{display:flex;gap:var(--seam);overflow-x:auto;padding-bottom:4px}
.stage{position:relative;isolation:isolate;flex:1 0 156px;min-height:118px;padding:16px 26px 16px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.stage::before{content:"";position:absolute;inset:0 10px;background:var(--bg,var(--white));border-radius:12px;z-index:-1;transform:skewX(calc(var(--slant)*-1));transition:background .16s}
.stage:first-child{padding-left:20px}.stage:first-child::before{left:0;right:10px;transform:none}
.stage:first-child::after{content:"";position:absolute;top:0;bottom:0;right:10px;width:44px;background:var(--bg,var(--white));border-radius:12px;z-index:-1;transform:skewX(calc(var(--slant)*-1))}
.stage:last-child{padding-right:20px}.stage:last-child::before{left:10px;right:0;transform:none}
.stage:last-child::after{content:"";position:absolute;top:0;bottom:0;left:10px;width:44px;background:var(--bg,var(--white));border-radius:12px;z-index:-1;transform:skewX(calc(var(--slant)*-1))}
.stage:hover{--bg:var(--blush2)}
.stage .mono{color:var(--muted);font-size:10.5px}
.stage .big{font-family:var(--display);font-size:34px;line-height:1;letter-spacing:-.02em}
.stage small{color:var(--muted);font-size:12px;line-height:1.35}
.stage.hot{--bg:var(--red);color:#fff}.stage.hot .mono,.stage.hot small{color:#FBD9D2}
.stage.hot:hover{--bg:var(--red-hover)}

/* bars */
.bar{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden;display:flex;min-width:80px}
.bar i{display:block;height:100%}
.spark{display:block}
.cat-row{display:grid;grid-template-columns:200px minmax(0,1fr) 64px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.cat-row:first-child{border-top:0}
.cat-row .bar{height:10px;border-radius:2px}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* activity */
.feed{display:flex;flex-direction:column}
.feed .it{display:grid;grid-template-columns:118px 18px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.feed .it:first-child{border-top:0}
.feed .it .mono{color:var(--muted);font-size:10.5px;padding-top:2px}
.feed .ic{width:8px;height:8px;border-radius:2px;margin-top:6px;transform:skewX(-18deg)}
@media (max-width:640px){.feed .it{grid-template-columns:18px minmax(0,1fr)}.feed .it .mono{grid-column:2}.feed .it .ic{grid-row:1/3}.feed .it .go{grid-column:2}}

/* ---------- Calls ---------- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--white);border-radius:8px;padding:0 10px;height:34px;min-width:220px;flex:1 1 220px;max-width:340px}
.search input{border:0;outline:0;background:none;width:100%}
.search svg{width:15px;height:15px;color:var(--muted)}
.sel{height:34px;border:1px solid var(--line2);background:var(--white);border-radius:8px;padding:0 28px 0 10px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2373738A' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--white);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kpi .mono{color:var(--muted);font-size:10.5px}
.kpi .v{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted);font-size:12px}
tr.row[aria-expanded="true"]{background:var(--blush2)!important}
tr.row[aria-expanded="true"] td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.chev{width:16px;height:16px;color:var(--muted);transition:transform .18s}
tr.row[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--ink)}
tr.detail>td{padding:0;white-space:normal;background:var(--panel);border-bottom:1px solid var(--line2)}
.cd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px;padding:8px;min-width:0}
@media (max-width:1180px){.cd{grid-template-columns:1fr}}
.cd .box{background:var(--white);border-radius:12px;padding:16px 18px;min-width:0}
.cd .box h3{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:-.01em;margin:0}
.cd .bh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cd .col{display:flex;flex-direction:column;gap:8px;min-width:0}
.player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px}
.play{width:40px;height:40px;border-radius:8px;background:var(--red);border:0;color:#fff;display:grid;place-items:center;cursor:pointer}
.play:hover{background:var(--red-hover)}
.play svg{width:16px;height:16px}
.wave{display:flex;align-items:center;gap:2px;height:40px;cursor:pointer;position:relative}
.wave i{flex:1;background:#4A4A55;border-radius:1px;min-width:1px}
.wave i.on{background:#fff}
.wave i.fl{background:var(--red)}
.wave i.fl.on{background:#FF8A75}
.ptime{font-family:var(--mono);font-size:11px;color:#C9C8D1;white-space:nowrap}
.speed{font-family:var(--mono);font-size:10.5px;color:#fff;background:#2B2B33;border:0;border-radius:4px;padding:3px 6px;cursor:pointer}
.player.err{background:var(--panel2);color:var(--text);grid-template-columns:auto minmax(0,1fr)}
.player.err .play{background:var(--line2);cursor:not-allowed}
.tx{display:flex;flex-direction:column;max-height:640px;overflow-y:auto;margin-top:12px;border-top:1px solid var(--line)}
.tseg{display:grid;grid-template-columns:52px 64px minmax(0,1fr) auto;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);align-items:start;position:relative;cursor:pointer;transition:background .12s}
.tseg:hover{background:var(--panel)}
.tseg .ts{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}
.tseg .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.tseg .who.a{color:var(--red)}
.tseg .who.c{color:var(--muted)}
.tseg p{margin:0;font-size:13.5px;line-height:1.5}
.tseg.cur{background:var(--blush2)}
.tseg.flagged{box-shadow:inset 3px 0 0 var(--red)}
.tseg.flagged p{background:linear-gradient(transparent 62%,var(--fail-t) 62%)}
.tseg .seg-act{opacity:0;transition:opacity .12s}
.tseg:hover .seg-act,.tseg:focus-within .seg-act{opacity:1}
.tseg .fbmark{font-family:var(--mono);font-size:10px;color:var(--cobalt)}
@media (max-width:640px){.tseg{grid-template-columns:44px minmax(0,1fr)}.tseg .who{grid-column:2}.tseg p{grid-column:2}.tseg .seg-act{grid-column:2;opacity:1}}
.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix td{padding:8px 0;border-top:1px solid var(--line);vertical-align:middle}
.matrix tr:first-child td{border-top:0}
.pips{display:inline-flex;gap:3px}
.pips i{width:14px;height:6px;border-radius:1px;background:var(--panel2);transform:skewX(-18deg)}
.pips.good i.on{background:var(--pass)}.pips.mid i.on{background:var(--warn)}.pips.bad i.on{background:var(--red)}
.flag{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.flag.HIGH{border-color:#F0B8AC;background:#FFF9F7}
.flag h4{margin:0;font-size:14px;font-weight:500;color:var(--ink)}
.flag p{margin:0;color:var(--text);font-size:13px}
.flag .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tests{display:flex;flex-direction:column}
.tests button{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;font-size:13px}
.tests button:first-child{border-top:0}
.tests button:hover span:last-child{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.fb-list{display:flex;flex-direction:column;gap:8px}
.fb{border-radius:10px;background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.fb .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.fb .top b{color:var(--ink);font-weight:500}
.fb p{margin:0;font-size:13px}
.composer{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.composer .target{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.composer textarea{min-height:64px;resize:vertical;font-size:13.5px;line-height:1.45}
.composer .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* empty / loading / error */
.empty{background:var(--white);border-radius:14px;padding:56px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:none}
.empty h2{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:-.02em;margin:0;max-width:20ch;line-height:1.1}
.empty p{margin:0;max-width:56ch}
.empty .mark{width:56px;height:24px;display:flex;gap:4px}
.empty .mark i{flex:1;background:var(--panel2);border-radius:4px;transform:skewX(-18deg)}
.empty .mark i:last-child{background:var(--red)}
.skel{background:linear-gradient(90deg,var(--panel2) 0%,#E9E7E1 40%,var(--panel2) 80%);background-size:200% 100%;animation:sh 1.1s linear infinite;border-radius:8px}
@keyframes sh{to{background-position:-200% 0}}
.inline-err{display:flex;gap:10px;align-items:flex-start;font-size:13px}

/* ---------- Graph ---------- */
.graph-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:8px;min-height:620px}
@media (max-width:1180px){.graph-wrap{grid-template-columns:1fr}}
.canvas{position:relative;background:var(--white);border-radius:14px;overflow:hidden;min-height:620px;cursor:grab;touch-action:none;
  background-image:radial-gradient(circle,#DAD7CF 1px,transparent 1.2px);background-size:24px 24px}
.canvas.drag{cursor:grabbing}
.stagewrap{position:absolute;left:0;top:0;transform-origin:0 0}
.gnode{position:absolute;width:196px;min-height:78px;border:1px solid var(--line2);background:var(--white);border-radius:10px;padding:10px 12px 10px;display:flex;flex-direction:column;gap:4px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}
.gnode:hover{border-color:var(--ink)}
.gnode .mono{font-size:9.5px;color:var(--muted);display:flex;justify-content:space-between;gap:6px}
.gnode b{font-weight:500;font-size:13.5px;line-height:1.25;color:var(--ink)}
.gnode .gstat{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:auto}
.gnode .gstat .bar{height:4px;min-width:0;flex:1}
.gnode.decision{background:var(--paper);border-color:transparent}
.gnode.decision::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:6px;background:var(--ink);border-radius:10px 0 0 10px}
.gnode.start{background:var(--ink);border-color:var(--ink)}
.gnode.start b,.gnode.start .mono,.gnode.start .gstat{color:#fff}
.gnode.end{border:1.5px solid var(--ink)}
.gnode .badge{position:absolute;top:-9px;right:10px;background:var(--red);color:#fff;font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:4px}
.gnode .chg{position:absolute;top:-9px;left:10px;background:var(--warn-t);color:var(--warn);font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:4px;letter-spacing:.04em}
.gnode[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.gnode.dim{opacity:.35}
.gtools{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:4px;z-index:5}
.gtools button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);background:var(--white);cursor:pointer;display:grid;place-items:center}
.gtools button:hover{border-color:var(--ink)}
.gtools svg{width:16px;height:16px}
.glegend{position:absolute;left:12px;bottom:12px;z-index:5;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);max-width:calc(100% - 24px)}
.glegend span{display:inline-flex;align-items:center;gap:6px}
.glegend i{width:14px;height:10px;border-radius:3px;display:inline-block;border:1px solid var(--line2)}
.ro{position:absolute;left:12px;top:12px;z-index:5}
.npanel{background:var(--white);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0;align-self:start;position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto}
.npanel h2{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.02em;margin:4px 0 0;line-height:1.1}
.npanel .sect{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.npanel .sect>.mono{color:var(--muted);font-size:10.5px}
.npanel q{display:block;font-family:var(--display);font-size:16px;line-height:1.4;quotes:none;background:var(--panel);padding:10px 12px;border-radius:8px}
.exits{display:flex;flex-direction:column;gap:6px}
.exits button{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);background:none;border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left}
.exits button:hover{border-color:var(--ink)}
.mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mstats div{background:var(--panel);border-radius:8px;padding:10px}
.mstats .v{font-family:var(--display);font-size:22px;line-height:1;letter-spacing:-.02em}
.mstats small{display:block;color:var(--muted);font-size:11px;margin-top:4px}

/* modal / sheet */
.sheet-scrim{position:fixed;inset:0;background:rgba(23,23,28,.32);z-index:80;display:flex;justify-content:flex-end}
.sheet{width:min(480px,100%);height:100%;background:var(--white);padding:28px 28px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding-top:calc(28px + env(safe-area-inset-top,0px));animation:slin .22s ease}
@keyframes slin{from{transform:translateX(24px);opacity:.4}}
.sheet h2{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin:6px 0 0}
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px 14px;font-size:13.5px}
.kv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{margin:0}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100;font-size:13.5px;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px)}
.toast .dot{background:var(--red)}

/* prototype map */
.map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:900px){.map{grid-template-columns:1fr}}
.map ol{margin:0;padding:0;list-style:none;counter-reset:n}
.map li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:start;counter-increment:n}
.map li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}
.map li:first-child{border-top:0}
.map li b{font-weight:500;color:var(--ink);display:block}
.map li small{color:var(--muted);font-size:12.5px;display:block}
.rel{font-family:var(--mono);font-size:12px;line-height:2;color:var(--text);background:var(--panel);border-radius:10px;padding:14px 16px;overflow-x:auto;white-space:pre}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Phase 3 & 4 additions (same tokens and patterns) ===== */
.demo.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.demo.three{grid-template-columns:1fr}}
.bell-dot{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:4px;background:var(--red);color:#fff;font-family:var(--mono);font-size:9.5px;display:grid;place-items:center;padding:0 3px}
.menu.right{left:auto;right:0;min-width:360px;max-width:calc(100vw - 32px)}
.menu.right button{grid-template-columns:auto minmax(0,1fr) auto}
.menu.right b{display:block;font-size:13px;line-height:1.35;white-space:normal}
.rangepop{position:absolute;top:calc(100% + 8px);right:0;z-index:30;background:var(--white);border:1px solid var(--line2);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;width:min(420px,calc(100vw - 32px));box-shadow:0 18px 40px -18px rgba(23,23,28,.35)}
.rp-row{display:flex;gap:8px;flex-wrap:wrap}
.rp-row .field{flex:1 1 150px}
.modal-scrim{position:fixed;inset:0;background:rgba(23,23,28,.36);z-index:90;display:grid;place-items:center;padding:16px}
.modal{background:var(--white);border-radius:16px;padding:24px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow-y:auto;display:flex;flex-direction:column;gap:16px;animation:slin .2s ease}
.modal h2,.h2b{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.02em;line-height:1.15;margin:6px 0 0}
.modal-act{display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap}
.sect-b{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.ex{display:grid;grid-template-columns:76px minmax(0,1fr);gap:6px 10px;background:var(--panel);border-radius:10px;padding:12px 14px}
.ex .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.ex .who.a{color:var(--red)}.ex .who.c{color:var(--muted)}
.ex p{margin:0;font-size:13.5px}
.vtrack{display:flex;gap:4px;flex-wrap:wrap}
.vtrack>div{display:flex;flex-direction:column;gap:4px;min-width:64px;flex:1}
.vtrack i{height:8px;border-radius:2px;transform:skewX(-18deg);background:var(--red)}
.vtrack .pass i{background:var(--ink)}
.vtrack small{font-size:11px;color:var(--muted)}
.vtrack .mono{font-size:10.5px}
.simnote{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--blush2);border-radius:10px;padding:10px 12px;font-size:13px}
/* library */
.cattiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:1180px){.cattiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.cattiles{grid-template-columns:1fr 1fr}}
.ctile{background:var(--white);border:1.5px solid transparent;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;min-width:0}
.ctile:hover{border-color:var(--line2)}
.ctile.on{border-color:var(--ink)}
.ctile .mono{font-size:10.5px;color:var(--muted)}
.ctile .v{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:-.02em}
.ctile small{color:var(--muted);font-size:12px;line-height:1.35}
.ctile .bar{height:6px;margin-top:4px;min-width:0}
table.t td.wrap{white-space:normal;min-width:200px}
table.t.lib td.wrap:nth-child(2){min-width:260px;max-width:340px}
table.t.lib td.wrap:nth-child(4){max-width:320px}
.muted-t{color:var(--text);font-size:13px}
.mono-s{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.hpips{display:inline-flex;gap:3px}
.hpips i{width:10px;height:14px;border-radius:2px;background:var(--red);transform:skewX(-18deg);opacity:.85}
.hpips i.pass{background:var(--ink);opacity:.85}
.hpips i.cur{outline:2px solid var(--red);outline-offset:1px;opacity:1}
.hpips i.pass.cur{outline-color:var(--ink)}
/* versions */
.improve{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;padding:24px}
@media (max-width:980px){.improve{grid-template-columns:1fr}}
.imp-l{display:flex;flex-direction:column;gap:12px;justify-content:center}
.imp-l p{margin:0;max-width:44ch}
.imp-big{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:clamp(48px,6vw,76px);line-height:1;letter-spacing:-.03em}
.imp-big .arrow svg{width:36px;height:36px;color:var(--muted)}
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:8px}
.lane{background:var(--white);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.lane.live{box-shadow:inset 0 3px 0 var(--ink)}
.lane.cand{box-shadow:inset 0 3px 0 var(--red)}
.lane .mono{color:var(--muted);font-size:10.5px}
.lane-big{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--display);font-size:44px;line-height:1;letter-spacing:-.02em}
.lane-pass{font-size:36px}.lane-pass small{font-size:18px;color:var(--muted)}
.lane-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12.5px;flex-wrap:wrap}
.lane-delta{display:flex;gap:6px;flex-wrap:wrap}
.lane-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto}
.lane-note{margin:0;font-size:12.5px;color:var(--warn);background:var(--warn-t);border-radius:8px;padding:8px 10px}
.empty-lane{justify-content:center}
.empty-lane h3{font-family:var(--display);font-weight:400;font-size:22px;margin:0}
ul.chg{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
ul.chg li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.45}
ul.chg li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:6px;background:var(--red);border-radius:1px;transform:skewX(-18deg)}
.cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;background:var(--panel);border-radius:12px;padding:18px 20px}
.cmp-col{display:flex;flex-direction:column;gap:4px}
.cmp-col:last-child{text-align:right;align-items:flex-end}
.cmp-big{font-family:var(--display);font-size:48px;line-height:1;letter-spacing:-.02em}.cmp-big small{font-size:20px;color:var(--muted)}
.cmp-mid{display:flex;flex-direction:column;align-items:center;gap:2px}
.cmp-delta{font-family:var(--display);font-size:32px;line-height:1}
.cmp-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:18px}
@media (max-width:980px){.cmp-lists{grid-template-columns:1fr}}
.cmp-lists h3,.cmp-chg h3{font-family:var(--display);font-weight:400;font-size:17px;margin:0 0 8px;display:flex;gap:8px;align-items:baseline}
.cmp-chg{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.cc{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px}
.cc .mono{padding-top:2px;color:var(--muted)}
.console{display:flex;flex-direction:column;gap:10px}
.run{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.verdict{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;font-size:13px;padding:8px 10px;border-radius:8px}
.verdict.ok{background:var(--pass-t)}.verdict.no{background:var(--fail-t)}
.verdict span:nth-child(2){flex:1;min-width:200px}
.mcmp{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;background:var(--panel);border-radius:12px;padding:14px 16px}
.mcmp>div{display:flex;flex-direction:column;gap:2px}
.mcmp b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1}
.mcmp .arrow svg{width:22px;height:22px;color:var(--muted)}
.regbox{border:1px solid #F0B8AC;background:#FFF9F7;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.chk input{margin-top:3px;accent-color:var(--red)}
.chk.err{color:var(--red)}
/* team */
.person{display:inline-flex;align-items:center;gap:10px}
.person .av{width:28px;height:28px;border-radius:50%;background:var(--blush);color:var(--red-deep);display:grid;place-items:center;font-size:11.5px;font-weight:500;flex:none}
.av.sq{border-radius:7px!important;background:var(--ink)!important;color:#fff!important;font-family:var(--display)}
.av.lg{width:52px!important;height:52px!important;font-size:20px!important;border-radius:10px!important}
.person b{display:block;font-weight:500;font-size:14px;color:var(--ink)}
.person small{display:block;color:var(--muted);font-size:12px}
.sel.sm{height:30px;font-size:13px}
.row-act{display:inline-flex;gap:14px}
.link.danger{color:var(--red);text-decoration-color:#F0B8AC}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:760px){.roles{grid-template-columns:1fr}}
/* admin */
.kpis.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1280px){.kpis.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.kpis.six{grid-template-columns:1fr 1fr}}
.kbtn{border:1.5px solid transparent;text-align:left;cursor:pointer}
.kbtn:hover{border-color:var(--line2)}
.kbtn.on{border-color:var(--ink)}
.attn{display:flex;flex-direction:column}
.att{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 4px;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.att:first-child{border-top:0}
.att:hover{background:var(--panel)}
.att b{display:block;font-weight:500;font-size:14px;color:var(--ink)}
.att small{color:var(--muted);font-size:12.5px}
.aico{width:10px;height:18px;border-radius:2px;transform:skewX(-18deg)}
.aico.cand{background:var(--warn)}.aico.appr{background:var(--cobalt)}.aico.high{background:var(--red)}.aico.req{background:var(--pass)}
.notifs{display:flex;flex-direction:column}
.nt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 2px;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.nt:first-child{border-top:0}
.nt:hover{background:var(--panel)}
.nt .mono{display:block;font-size:10px}
.nt b{display:block;font-weight:400;font-size:13.5px;color:var(--text)}
.nt.unread b{font-weight:500;color:var(--ink)}
.nt small{color:var(--muted);font-size:12px}
.custgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:8px;align-items:start}
@media (max-width:980px){.custgrid{grid-template-columns:1fr}}
.clist{display:flex;flex-direction:column;gap:6px}
.ccard{background:var(--white);border:1.5px solid transparent;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer}
.ccard:hover{border-color:var(--line2)}
.ccard.on{border-color:var(--ink)}
.cc-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.cdetail{display:flex;flex-direction:column;gap:8px;min-width:0}
.chead{display:flex;gap:14px;align-items:center}
.grid2.even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.grid2.even{grid-template-columns:1fr}}
.checks{display:flex;flex-direction:column}
.ck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.ck:first-child{border-top:0}
.ckb{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--line2);display:grid;place-items:center}
.ckb svg{width:12px;height:12px}
.ck.done .ckb{background:var(--pass);border-color:var(--pass);color:#fff}
.ck.doing .ckb{border-color:var(--warn)}
.ck.fail .ckb{background:var(--red);border-color:var(--red);color:#fff}
.req{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.req:first-child{border-top:0;padding-top:0}
.req b{font-weight:500;display:block;color:var(--ink)}
.req small{display:block;color:var(--muted);font-size:12.5px}
.apgrid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:8px;align-items:start}
@media (max-width:1100px){.apgrid{grid-template-columns:1fr}}
.queue{display:flex;flex-direction:column;gap:6px}
.qitem{background:var(--white);border:1.5px solid transparent;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer}
.qitem:hover{border-color:var(--line2)}
.qitem.on{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--red)}
.qitem b{font-weight:500;font-size:13.5px;line-height:1.4;color:var(--ink)}
.q-top,.q-bot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.q-top .mono{font-size:10.5px;color:var(--muted)}
.srcbox{background:var(--panel);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.src-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.src-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.src-meta b{font-weight:500}
.quote{margin:0;font-family:var(--display);font-size:15px;line-height:1.4;color:var(--ink);display:flex;flex-direction:column;gap:4px}
.props{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
@media (max-width:760px){.props{grid-template-columns:1fr}}
.prop{border:1.5px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--white)}
.prop h4{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:-.01em;margin:0;line-height:1.25}
.prop.added{border-color:#BFD8C9;background:#FAFDFB}
.prop.rejected{opacity:.6}
.prop.approved{border-color:var(--sage)}
.prop.edit{border-color:var(--ink)}
.pc-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pc-h .mono{color:var(--muted);font-size:10.5px}
.pc-act{display:flex;gap:14px;align-items:center;justify-content:flex-end;margin-top:auto;flex-wrap:wrap}
.kv.sm{grid-template-columns:76px minmax(0,1fr);font-size:13px}
.wf .stage{cursor:default;min-height:104px}
.wf .stage:hover{--bg:var(--white)}
.wf .stage.hot:hover{--bg:var(--red)}
.wf .stage.todo{--bg:transparent}
.wf .stage.todo::before,.wf .stage.todo::after{border:1.5px dashed var(--line2)}
.wf-t{font-family:var(--display);font-size:16px;line-height:1.2}
.review{box-shadow:inset 0 3px 0 var(--red)}
.rv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:900px){.rv{grid-template-columns:1fr}}
.inboxgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:8px;align-items:start}
@media (max-width:1280px){.inboxgrid{grid-template-columns:1fr}}
.srcl{cursor:pointer;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.srcl:hover{background:var(--line)}
.fbedit{display:grid;grid-template-columns:repeat(3,minmax(0,160px)) minmax(0,1fr) auto;gap:8px;align-items:end;padding:12px}
@media (max-width:1100px){.fbedit{grid-template-columns:1fr 1fr}}
.fbedit .field{background:var(--white)}
.fb-act{display:flex;gap:14px;align-items:center}
.crumbs{flex:1 1 auto;min-width:0}
.ucsel>button{max-width:100%}
.ucsel>button b{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:980px){.crumbs .ucsel{min-width:0;max-width:100%}.crumbs .ucsel>button .mono{display:none}.crumbs .ucsel>button{max-width:calc(100vw - 120px)}.menu{min-width:0;width:min(340px,calc(100vw - 32px))}}
@media (max-width:1500px){.inboxgrid{grid-template-columns:1fr}}
.toggle{flex-wrap:wrap;max-width:100%;row-gap:6px}
.ctile .chip{white-space:normal;text-align:left}

/* ===== Refinements: angled KPI cards, attention list, internal team ===== */
.stage{flex:1 0 176px;padding:18px 42px 18px 46px;gap:8px}
.stage:first-child{padding-left:24px}
.stage:last-child{padding-right:26px}
.stage .big{display:block}
.stage small{display:block}
.stage.static{cursor:default}
.stage.static:hover{--bg:var(--white)}
.stage.on{--bg:var(--ink);color:#fff}
.stage.on .mono,.stage.on small{color:#C9C8D1}
.stage.on:hover{--bg:#000}
.stage[disabled]{cursor:default}
.kpiloop .stage{min-height:118px}
.attn-p{box-shadow:inset 0 3px 0 var(--red)}
.attn2{display:flex;flex-direction:column}
.arow{display:grid;grid-template-columns:auto minmax(0,1fr) 120px auto;gap:16px;align-items:center;padding:16px 4px;border-top:1px solid var(--line)}
.arow:first-child{border-top:0;padding-top:4px}
.arow .aico{height:44px;width:12px;align-self:center}
.atext .mono{font-size:10.5px;color:var(--muted)}
.arow.crit .atext .mono{color:var(--red)}
.atext b{display:block;font-weight:500;font-size:15px;color:var(--ink);margin-top:2px}
.atext p{margin:4px 0 0;font-size:13.5px;max-width:72ch}
.ametric{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.ametric .num{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.arow.crit .ametric .num{color:var(--red)}
.arow.warn .ametric .num{color:var(--warn)}
.ametric small{font-size:11.5px;color:var(--muted);margin-top:4px}
.aacts{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:1100px){.arow{grid-template-columns:auto minmax(0,1fr) auto}.aacts{grid-column:2/4;justify-content:flex-start}}
@media (max-width:560px){.arow{grid-template-columns:auto minmax(0,1fr)}.ametric{grid-column:2;align-items:flex-start;text-align:left}.aacts{grid-column:2}}
.roles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.roles.three{grid-template-columns:1fr}}
tr.deact td{opacity:.55}
tr.deact td:last-child{opacity:1}
.role-help{background:var(--panel);border-radius:10px;padding:12px 14px}

/* ===== Attention actions: stacked slanted slabs ===== */
.arow{grid-template-columns:auto minmax(0,1fr) 120px 212px}
.aacts{flex-direction:column;align-items:stretch;justify-content:center;gap:8px;width:212px}
.slab{position:relative;isolation:isolate;height:40px;width:100%;border:0;background:none;padding:0 24px;font-family:var(--display);font-size:15px;letter-spacing:-.005em;color:var(--fg);cursor:pointer;white-space:nowrap;--bg:transparent;--bd:var(--ink);--fg:var(--ink);transition:color .16s}
.slab::before{content:"";position:absolute;inset:0 7px;background:var(--bg);border:1.5px solid var(--bd);border-radius:7px;transform:skewX(-18deg);z-index:-1;transition:background .16s,border-color .16s}
.slab:hover{--bg:var(--ink);--fg:#fff}
.slab.pri{--bg:var(--red);--bd:var(--red);--fg:#fff}
.slab.pri:hover{--bg:var(--red-hover);--bd:var(--red-hover)}
.slab:active{transform:translateY(1px)}
.slab:focus-visible{outline:none}.slab:focus-visible::before{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
@media (max-width:1100px){.arow{grid-template-columns:auto minmax(0,1fr) auto}.aacts{grid-column:2/4;width:min(100%,260px)}}
@media (max-width:560px){.arow{grid-template-columns:auto minmax(0,1fr)}.aacts{grid-column:2;width:100%}}

/* ===== QA evaluation: binary pass / fail ===== */
.qcrit{display:flex;flex-direction:column}
.qrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.qcrit>.qrow:first-child{border-top:0}
.qrow .qname .muted{font-size:12px}
.qrow.fail .qname{color:var(--ink);font-weight:500}
.qst{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:4px;border:0;white-space:nowrap}
.qst svg{width:12px;height:12px}
.qst.pass{background:var(--pass-t);color:var(--pass);cursor:default}
.qst.fail{background:var(--fail-t);color:var(--fail);cursor:pointer;font-weight:500}
.qst.fail:hover{background:#F8D3CA}
.qst.fail .chev{width:12px;height:12px;color:var(--fail);transition:transform .18s}
.qst.fail[aria-expanded="true"]{background:var(--red);color:#fff}
.qst.fail[aria-expanded="true"] .chev{transform:rotate(180deg);color:#fff}
.qdetail{border-left:3px solid var(--red);background:#FFF9F7;border-radius:0 10px 10px 0;padding:12px 14px;margin:0 0 8px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.qdetail p{margin:3px 0 0}
.qdetail .mono{font-size:10.5px}
.qd-where{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qd-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qd-cmp>div{background:var(--white);border-radius:8px;padding:10px 12px}
@media (max-width:560px){.qd-cmp{grid-template-columns:1fr}}
.qdetail[hidden],[hidden]{display:none!important}