/* Compliance OS theme: Stripe-style dashboard on a soft grey canvas, with quiet motion.
   Loaded after app.css, so it re-skins every screen without touching page templates. */
:root{
  --canvas:#E4E9F3; --side:#0E1424; --surface:#F3F6FB; --raised:#FAFBFE; --hover:#DCE2EE; --navy:#0E1424;
  --ink:#1A1F36; --soft:#414552; --muted:#687385; --line:#D5DCEA; --line-2:#C3CCDE;
  --violet:#3D5AFE; --violet-2:#7F9BFF; --lilac:#C9D4FB; --tint:#E2E7FF; --tint-2:#EEF1FF;
  --ok:#1E7B34; --ok-bg:#E3F1E6; --warn:#A8500E; --warn-bg:#F8ECDD; --err:#C8233F; --err-bg:#FAE3E7;
  --bg:var(--canvas); --white:var(--raised);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.4,.64,1);
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --shadow-1:0 1px 2px rgba(14,20,36,.06),0 0 0 1px var(--line);
  --shadow-2:0 2px 4px rgba(26,31,54,.05),0 0 0 1px var(--line);
}
html{background:var(--canvas)}
body{background:var(--canvas);color:var(--ink);font-size:14px;letter-spacing:-.003em}
::selection{background:var(--lilac)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ---------- shell: sidebar + main ---------- */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.sb{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:14px 10px 12px;background:var(--side);border-right:1px solid var(--line);z-index:35}
.sb-acct{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;text-decoration:none;border-radius:8px}
.sb-acct img{height:28px;width:auto;max-width:52px;object-fit:contain;border-radius:6px;background:#fff;padding:2px 4px;box-shadow:0 0 0 1px var(--line-2)}
.sb-acct b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}.sb-acct small{display:block;font-size:12px;color:var(--muted)}
.sb-nav{position:relative;display:flex;flex-direction:column;gap:1px;flex:1;overflow:auto}
.sb-nav h6{margin:16px 10px 4px;font-size:11.5px;font-weight:500;color:var(--muted)}
.sb-nav a{position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:7px;color:var(--soft);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.sb-nav a:hover{color:var(--ink)}
.sb-nav a.on{color:var(--violet);background:var(--raised);box-shadow:var(--shadow-1)}
.sb-nav a b{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.sb-nav a.on b{color:var(--violet)}
.ni{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.9}
.sb-glide{position:absolute;left:0;right:0;top:0;height:32px;border-radius:7px;background:var(--hover);opacity:0;transform:translateY(0);transition:transform .28s var(--ease),opacity .2s;pointer-events:none;z-index:0}
.sb-me{position:relative;border-top:1px solid var(--line);padding-top:10px}
.sb-me>button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:8px;transition:background .2s}
.sb-me>button:hover,.sb-me>button[aria-expanded=true]{background:var(--hover)}
.sb-me .avatar{width:30px;height:30px;font-size:11px;background:var(--violet)}
.sb-who b{display:block;font-size:13px;font-weight:600}.sb-who small{display:block;font-size:12px;color:var(--muted)}
.sb-me .hdr-dd{top:auto;bottom:52px;left:0;right:auto;width:270px;background:var(--raised);animation:pop .22s var(--ease);transform-origin:bottom left}
.mn{min-width:0;display:flex;flex-direction:column}
.tb{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:56px;padding:0 28px;background:rgba(228,233,243,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.tb-menu{display:none;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--soft);place-items:center;cursor:pointer}.tb-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.tb-search{flex:1;max-width:440px;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;color:var(--muted);transition:background .2s,box-shadow .2s}
.tb-search:hover{background:var(--hover)}
.tb-search:focus-within{background:var(--raised);box-shadow:0 0 0 1px var(--line-2),0 0 0 4px rgba(61,90,254,.12)}
.tb-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex:none}
.tb-search input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;color:var(--ink);outline:0}
.tb-search input::placeholder{color:var(--muted)}
.tb-search kbd{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:0 5px}
.tb-title{font-weight:600}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.tb-stat{font-size:13px;color:var(--muted);white-space:nowrap}.tb-stat b{color:var(--ink);font-weight:600;margin-left:4px;font-variant-numeric:tabular-nums}.tb-stat b.w{color:var(--warn)}.tb-stat b.e{color:var(--err)}
.hdr-bell{color:var(--soft)}.hdr-bell:hover,.hdr-bell[aria-expanded=true]{background:var(--hover);color:var(--ink)}
.hdr-bell em{box-shadow:0 0 0 2px var(--canvas);background:var(--err);animation:pop .4s var(--spring)}
.nbp{top:62px;background:var(--raised)}
.mn-body{flex:1;view-transition-name:main}
.sb-scrim{display:none}

/* ---------- page furniture re-skinned ---------- */
.strip{background:transparent;border-bottom:0;padding:26px 32px 6px;gap:16px;align-items:flex-end}
.strip h1{font-size:26px;font-weight:700;letter-spacing:-.025em}
.strip .kp{font-size:13px}
.page{min-height:calc(100vh - 140px)}
.main{padding:18px 32px 32px}
.side{background:var(--surface);border-left:1px solid var(--line)}
.box{background:var(--surface);border:0;box-shadow:var(--shadow-1);border-radius:10px;transition:box-shadow .2s}
.box.hi{background:var(--tint-2);box-shadow:0 0 0 1px var(--lilac)}.box.alert{background:#FBF3E6;box-shadow:0 0 0 1px #EBD6B2}
.flash{margin:14px 32px 0;border-radius:8px;box-shadow:0 0 0 1px currentColor inset;animation:slidein .45s var(--ease)}
.flash.ok{background:var(--ok-bg)}.flash.error{background:var(--err-bg)}
.muted{color:var(--muted)}

.btn{height:32px;padding:0 12px;border:0;border-radius:7px;background:var(--raised);color:var(--ink);box-shadow:0 0 0 1px var(--line-2),0 1px 1px rgba(26,31,54,.05);font-size:13.5px;font-weight:600;transition:box-shadow .2s,transform .12s,background .2s}
.btn:hover{box-shadow:0 0 0 1px #B9C0CD,0 2px 4px rgba(26,31,54,.08)}
.btn:active,.pv-btn:active,.kbtn:active,.rv-act:active{transform:scale(.97)}
.btn.pr,.btn.dark{background:var(--violet);color:#fff;box-shadow:0 1px 1px rgba(26,31,54,.15),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.pr:hover,.btn.dark:hover{background:#304BE8;box-shadow:0 2px 6px rgba(61,90,254,.35)}
.btn.ghost{background:transparent;box-shadow:none}.btn.sm{height:28px;padding:0 9px;font-size:12.5px}

/* pills become a dot and a word */
.pill{background:none!important;padding:0;border-radius:0;font-weight:500;font-size:13px;gap:6px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.p-ok{color:var(--ok)}.p-warn{color:var(--warn)}.p-err{color:var(--err)}.p-n{color:var(--soft)}.p-v,.p-b{color:var(--violet)}

/* tables: no outer box, hairlines, gentle hover */
.dt{background:transparent;border:0;border-radius:0;font-size:14px}
.dt th{font-size:12px;font-weight:600;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);background:transparent}
.dt td{padding:13px 12px;border-bottom:1px solid var(--line)}
.dt tbody tr{transition:background .15s}.dt tbody tr:hover td{background:var(--hover)}
.dt th:first-child,.dt td:first-child{padding-left:0}
.dt tfoot td{background:transparent}
.seg{gap:6px;margin-bottom:14px}
.seg a{height:28px;display:inline-flex;align-items:center;padding:0 10px;border:0;border-radius:6px;background:var(--raised);box-shadow:0 0 0 1px var(--line-2);font-size:13px;font-weight:500;color:var(--soft);transition:box-shadow .2s,color .2s}
.seg a:hover{color:var(--ink)}.seg a.on{background:var(--raised);color:var(--violet);box-shadow:0 0 0 1.5px var(--violet)}
.tiles div{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 0}
input[type=text],input[type=email],input[type=number],input[type=date],input[type=password],input:not([type]),select,textarea{background:var(--raised);border-color:var(--line-2)}
dialog{background:var(--raised);border-radius:12px;animation:pop .28s var(--ease)}dialog::backdrop{background:rgba(26,31,54,.28);backdrop-filter:blur(2px);animation:fade .25s}
.li{background:var(--surface);border:0;box-shadow:var(--shadow-1)}

/* page-level skins for the newer screens */
.kc,.pv,.fl{--bg:var(--canvas)}
.kh{background:transparent!important;border-bottom:1px solid var(--line)}
.ks{background:var(--surface)!important}
.kc .kbtn{background:var(--violet)}.kc .kbtn.q{background:var(--raised)}.kc .kbtn:not(.q):hover{background:#304BE8}
.kai,.kaff{background:linear-gradient(180deg,var(--tint-2),var(--surface))!important}
.pv-d{background:var(--surface)!important}
.pv-btn{background:var(--violet)}.pv-btn.q{background:var(--raised)}.pv-btn:not(.q):hover{background:#304BE8}
.pv-row.sel{background:var(--tint)!important}
.rv-sum{background:var(--surface)!important;box-shadow:var(--shadow-1)!important}
.fl-box,.fl-sign{background:var(--surface)!important}
.fl-go{background:var(--violet)}
.nbp,.hdr-dd{box-shadow:0 0 0 1px var(--line-2),0 24px 48px -16px rgba(26,31,54,.3)}

/* queue */
.q-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:26px 32px 0;flex-wrap:wrap}
.q-h h1{font-size:26px;font-weight:700;letter-spacing:-.025em}
.q-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 32px 0;border-top:1px solid var(--line)}
.q-kpi div{padding:14px 0 0;display:grid;gap:3px}
.q-kpi small{font-size:13px;color:var(--muted);font-weight:500}.q-kpi b{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.q-kpi b.e{color:var(--err)}.q-kpi b.w{color:var(--warn)}.q-kpi span{font-size:12.5px;color:var(--muted)}
.q-f{display:flex;gap:6px;flex-wrap:wrap;padding:22px 32px 4px}
.q-f .sep{width:1px;background:var(--line-2);margin:4px 6px}
.q-f a{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:6px;background:var(--raised);box-shadow:0 0 0 1px var(--line-2);font-size:13px;font-weight:500;color:var(--soft);text-decoration:none;transition:box-shadow .2s,color .2s}
.q-f a b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.q-f a:hover{color:var(--ink)}.q-f a.on{color:var(--violet);box-shadow:0 0 0 1.5px var(--violet)}.q-f a.on b{color:var(--violet)}
.q-t{width:calc(100% - 64px);margin:8px 32px 0;border-collapse:collapse;font-size:14px}
.q-t th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.q-t td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.q-t th:first-child,.q-t td:first-child{padding-left:0}.q-t th:last-child,.q-t td:last-child{padding-right:0;text-align:right}
.q-t tbody tr{cursor:pointer;transition:background .15s}.q-t tbody tr:hover td{background:var(--hover)}
.q-who b{display:block;font-weight:500;color:var(--ink)}.q-who small{display:block;color:var(--muted);font-size:13px}
.q-t .why{color:var(--soft);max-width:46ch}
.q-t .typ{font-size:13px;color:var(--muted);white-space:nowrap}
.q-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap}.q-st i{width:6px;height:6px;border-radius:50%;background:currentColor}
.q-st.new{color:var(--violet)}.q-st.in_review{color:#0570DE}.q-st.waiting_docs{color:var(--warn)}.q-st.escalated{color:var(--err)}.q-st.closed{color:var(--ok)}
.q-t .with{color:var(--soft);white-space:nowrap}.q-t .due{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--soft)}.q-t .due.e{color:var(--err);font-weight:500}
.q-t .ref{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.q-empty{padding:40px 0;color:var(--muted);text-align:center}
.q-note{padding:14px 32px 32px;font-size:12.5px;color:var(--muted)}

/* ---------- motion ---------- */
@view-transition{navigation:auto}
::view-transition-old(main){animation:vt-out .16s var(--ease) both}
::view-transition-new(main){animation:vt-in .32s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(4px)}}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}}
.m-in{animation:rise .5s var(--ease) both;animation-delay:calc(var(--d,0) * 1ms)}
.m-row{animation:rise .42s var(--ease) both;animation-delay:calc(var(--d,0) * 1ms)}
.flash.out{transition:opacity .5s,transform .5s,margin .5s,padding .5s,max-height .5s;opacity:0;transform:translateY(-6px);max-height:0;padding-top:0;padding-bottom:0;margin-top:0}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sb{position:fixed;left:0;top:0;bottom:0;width:270px;transform:translateX(-100%);transition:transform .32s var(--ease);box-shadow:0 0 40px rgba(26,31,54,.2)}
  body.sb-open .sb{transform:none}
  .sb-scrim{display:block;position:fixed;inset:0;background:rgba(26,31,54,.3);opacity:0;pointer-events:none;transition:opacity .3s;z-index:34}
  body.sb-open .sb-scrim{opacity:1;pointer-events:auto}
  .tb{padding:0 12px}.tb-menu{display:grid}.tb-stat,.tb-search kbd{display:none}
  .strip,.q-h{padding:20px 16px 4px}.main{padding:14px 16px 24px}.q-kpi{margin:16px 16px 0;grid-template-columns:repeat(2,1fr)}.q-f{padding:16px 16px 4px}
  .q-t{width:calc(100% - 32px);margin:6px 16px 0}.q-t .hide{display:none}.flash{margin:12px 16px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-old(main),::view-transition-new(main){animation:none}
}
.tb-search input{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;height:auto!important;width:auto}
.dt a,.side a.li{text-decoration:none}.dt a{font-weight:500}.dt a:hover{color:var(--violet)}

/* ---------- Navy rail: Compliance OS brand in the sidebar ---------- */
.sb{background:var(--navy);border-right:0;color:#C9D0E2;overflow:hidden;isolation:isolate}
.sb::before{content:"";position:absolute;width:440px;height:440px;left:-190px;bottom:-210px;border-radius:50%;background:radial-gradient(closest-side,rgba(127,155,255,.22),transparent 70%);z-index:-1;pointer-events:none;animation:sbglow 20s var(--ease) infinite alternate}
@keyframes sbglow{to{transform:translate(40px,-30px) scale(1.1)}}
.sb-cos{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;text-decoration:none;color:#fff}
.sb-cos svg{width:28px;height:28px;border-radius:7px;flex:none}
.sb-cos b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.sb-venue{display:flex;align-items:center;gap:10px;margin:0 2px 10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sb-venue img{height:26px;width:auto;max-width:52px;object-fit:contain;border-radius:5px;background:#fff;padding:2px 4px;flex:none}
.sb-venue b{display:block;font-size:13px;font-weight:600;color:#fff;line-height:1.25}.sb-venue small{display:block;font-size:11.5px;color:#8E97B0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sb-venue span{min-width:0}
.sb-nav h6{color:#6C7590}
.sb-nav a{color:#AEB6CC}.sb-nav a:hover{color:#fff}.sb-nav a b{color:#7F89A4}
.sb-nav a.on{background:rgba(127,155,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(127,155,255,.25)}.sb-nav a.on b{color:#C9D4FB}
.sb-glide{background:rgba(255,255,255,.06)}
.sb-me{border-top-color:rgba(255,255,255,.08)}
.sb-me>button:hover,.sb-me>button[aria-expanded=true]{background:rgba(255,255,255,.07)}
.sb-me .avatar{background:linear-gradient(135deg,#7F9BFF,#3D5AFE)}
.sb-who b{color:#fff}.sb-who small{color:#8E97B0}
.sb-me .hdr-dd{color:var(--ink)}
.tb-mark{display:none}.tb-mark svg{width:26px;height:26px;border-radius:6px;display:block}
@media (max-width:900px){.tb-mark{display:block}.sb{box-shadow:none}body.sb-open .sb{box-shadow:0 0 40px rgba(0,0,0,.4)}}

/* quiet top bar (T-B3): venue and date on the right, the bell shows a dot */
.tb{background:rgba(228,233,243,.88)}
.tb-ctx{font-size:13px;color:var(--muted);white-space:nowrap}.tb-ctx b{color:var(--soft);font-weight:500}
.hdr-bell em{top:6px;right:6px;min-width:0;width:8px;height:8px;padding:0;border-radius:50%;font-size:0;line-height:0;overflow:hidden}
.tb-search kbd{background:var(--raised)}
@media (max-width:900px){.tb-ctx{display:none}.tb-r{gap:6px}.tb-search{min-width:0}}