/* Chrysergia CRM 0.1.7 — the application shell, lists, record page and ⌘K.
   Tokens and components are the approved mockup's (v1.6, spec §11.8 Brand Standard v7), so the
   product and the mockup the owner signed off read as one thing. Manrope only, self-hosted. */
@font-face{font-family:Manrope;src:url(fonts/Manrope-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/Manrope-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

.app{
  --dark:#1B1B1B; --card:#232220; --raised:#2B2926; --sunken:#1F1E1C;
  --line:rgba(232,196,90,.14); --line2:rgba(232,196,90,.28);
  --text:#F4ECD8; --muted:#A9A190; --gold:#B8913A; --goldtx:#E8C45A;
  --grad:linear-gradient(60deg,#B8872B,#E8C45A,#F8E08A,#D5A840,#A77A22);
  --ok:#7FB77E; --warn:#D9A441; --bad:#E07A5F;
  --r:10px; --rail:248px; --band:0px; --bar:72px; --hdr:calc(var(--band) + var(--bar));
  font-synthesis-weight:none;
  min-height:100vh;display:flex;flex-direction:column;background:var(--dark);color:var(--text);
  font-size:14px;line-height:1.55;position:relative;z-index:5
}
body.in-app{font-size:14px}
body.in-app .page,body.in-app .glow,body.in-app .grain{display:none!important}
body.demo .app{--band:30px}
.app button,.app input,.app select{font:inherit;color:inherit}
.app a{color:var(--goldtx)}
.app .eyebrow{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0;display:block}
.app .eyebrow::before{display:none}
.mut{color:var(--muted)}
.num{font-weight:800;letter-spacing:-.02em}

/* ── header: the demo band and the system bar stick together ───────────── */
.app-hdr{position:sticky;top:0;z-index:45}
.app-band{height:var(--band);display:none;align-items:center;justify-content:center;background:#E8B24A;color:#1B1B1B;
  font-weight:700;font-size:12.5px;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.demo .app-band{display:flex}
.sysbar{display:flex;align-items:center;gap:14px;height:var(--bar);padding:0 18px;background:#161513;
  border-bottom:1px solid var(--line);font-size:12px}
.sysbar .lg-wide{width:168px;height:auto;display:block}
.sysbar .lg-small{width:34px;height:auto;display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--sunken);font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.chip b{color:var(--text);font-weight:600}
.spacer{flex:1}
.kbtn{display:flex;align-items:center;gap:8px;background:var(--sunken);border:1px solid var(--line);border-radius:8px;
  padding:0 10px;min-height:36px;color:var(--muted);cursor:pointer;font-size:12px}
.kbtn:hover{border-color:var(--line2);color:var(--text)}
.kbtn .lblS{display:none}
kbd{font-family:inherit;font-size:10px;font-weight:600;background:var(--raised);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--muted)}
.me{display:flex;align-items:center;gap:9px;min-width:0}
.me .whoami{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.me .whoami b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.me .whoami span{font-size:10.5px;color:var(--muted)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#1B1B1B;display:grid;place-items:center;font-weight:800;font-size:11px;flex:0 0 auto}

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell{flex:1;display:flex;align-items:flex-start}
.rail{flex:0 0 var(--rail);background:#161513;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1px;
  padding:10px 8px;position:sticky;top:var(--hdr);align-self:flex-start;min-height:calc(100vh - var(--hdr))}
.navgrp{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A8372;padding:2px 10px 5px;white-space:nowrap;overflow:hidden}
.tile{min-height:44px;width:100%;border-radius:9px;border:1px solid transparent;background:transparent;display:flex;align-items:center;
  gap:11px;padding:0 10px;cursor:pointer;position:relative;color:#BEB6A6;text-align:left;text-decoration:none;transition:background .12s,color .12s}
.app a.tile{color:#BEB6A6;text-decoration:none}
.tile .sym{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:var(--sunken);border:1px solid var(--line);display:grid;
  place-items:center;font-weight:700;font-size:11px;letter-spacing:-.02em;color:inherit}
.tile .lb{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app a.tile:hover{background:var(--raised);color:var(--text)}
.app a.tile.on{background:var(--card);color:var(--goldtx);font-weight:600}
.tile.on .sym{border-color:var(--goldtx);background:rgba(232,196,90,.1)}
.tile.on::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--grad)}
.rail-note{margin-top:auto;padding:10px;font-size:11px;color:var(--muted);line-height:1.45}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.ctxbar{position:sticky;top:var(--hdr);z-index:35;display:flex;align-items:center;gap:10px;padding:0 18px;min-height:52px;
  border-bottom:1px solid var(--line);background:var(--card);flex-wrap:wrap}
.ctxbar h1{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em;line-height:1.3;white-space:nowrap}
.ctxbar .back{font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.views{display:flex;gap:4px;margin-left:6px;flex-wrap:wrap;padding:8px 0}
.view{padding:5px 11px;border-radius:7px;font-size:12px;font-weight:500;color:var(--muted);border:1px solid transparent;cursor:pointer;
  background:transparent;min-height:30px}
.view:hover{color:var(--text);background:var(--raised)}
.view.on{color:#1B1B1B;background:var(--grad);font-weight:700}
.view.mine::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-left:6px;vertical-align:middle;opacity:.6}
.app .btn{font-size:12px;line-height:1.4;padding:6px 13px;min-height:32px;border-radius:8px;border:1px solid var(--line2);background:var(--raised);color:var(--text);font-size:12px;font-weight:600;cursor:pointer}
.app .btn:hover{border-color:var(--goldtx)}
.app .btn.pri{background:var(--grad);color:#1B1B1B;border-color:transparent}
.app .btn.ghost{background:transparent}
.app .btn:disabled{opacity:.5;cursor:default}
.acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.acts input{background:var(--sunken);border:1px solid var(--line2);border-radius:8px;padding:5px 10px;min-height:32px;width:200px;font-size:12px}
.acts .say{font-size:11.5px;color:var(--muted)}

.app .surface{flex:1;padding:18px;display:block;align-items:normal}
:focus-visible{outline:2px solid var(--goldtx);outline-offset:2px;border-radius:6px}

/* ── building blocks ───────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card h2,.card h3{margin:0 0 12px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}
.app .grid{display:grid;gap:14px;grid-template-columns:none;align-items:stretch;width:auto}.grid>*{min-width:0}
.app .g2{grid-template-columns:repeat(2,1fr)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap}
th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
th button:hover{color:var(--text)}
th button:focus-visible{outline:2px solid var(--goldtx);outline-offset:2px;border-radius:4px}
th .ar{font-size:9px;color:var(--goldtx)}
td{padding:9px 10px;border-bottom:1px solid rgba(232,196,90,.07);vertical-align:top}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr.go{cursor:pointer}
tbody tr.go:hover{background:var(--raised)}
td a.rl{color:var(--text);font-weight:600;text-decoration:none}
td a.rl:hover{color:var(--goldtx);text-decoration:underline}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--line2);color:var(--goldtx);white-space:nowrap}
.tag.ok{color:var(--ok);border-color:rgba(127,183,126,.4)}
.tag.warn{color:var(--warn);border-color:rgba(217,164,65,.4)}
.tag.bad{color:var(--bad);border-color:rgba(224,122,95,.4)}
.tag.mutd{color:var(--muted);border-color:rgba(169,161,144,.3)}
.app .note{font-size:11.5px;color:var(--muted);line-height:1.5;margin:0;padding:0;position:static;max-width:none}
.app .note::before{display:none}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--text);font-size:14px;margin-bottom:4px}

/* list toolbar: text filter, enum filters, the summary line */
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tools input[type=search]{background:var(--sunken);border:1px solid var(--line);border-radius:8px;padding:6px 11px;min-height:34px;width:min(280px,100%);font-size:12.5px}
.tools input[type=search]:focus{border-color:var(--line2);outline:none}
.fchip{position:relative}
.fchip>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0 11px;min-height:34px;border-radius:8px;
  border:1px solid var(--line);background:var(--sunken);font-size:12px;color:var(--muted)}
.fchip>summary::-webkit-details-marker{display:none}
.fchip>summary b{color:var(--goldtx);font-weight:600}
.fchip[open]>summary,.fchip>summary:hover{border-color:var(--line2);color:var(--text)}
.fchip .opts{position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:var(--card);border:1px solid var(--line2);border-radius:9px;
  padding:6px;min-width:190px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.fchip label{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;min-height:34px}
.fchip label:hover{background:var(--raised)}
.fchip input{accent-color:#E8C45A;width:15px;height:15px}
.fchip .clr{margin-top:4px;width:100%}
.summary{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.summary b{color:var(--text)}

/* record page (spec §11.4): main column + sticky context rail */
.rec{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.rec>*{min-width:0}
.rec aside{position:sticky;top:calc(var(--hdr) + 68px)}
.rec .title{font-size:17px;font-weight:700;margin:4px 0 8px;line-height:1.3;overflow-wrap:anywhere}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.kv{font-size:12px}
.kv td{padding:7px 0;border-bottom:1px solid rgba(232,196,90,.07)}
.kv td:first-child{color:var(--muted);padding-right:10px;white-space:nowrap}
.kv td:last-child{text-align:right;overflow-wrap:anywhere}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tab{padding:9px 13px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;background:transparent;min-height:40px}
.tab:hover{color:var(--text)}
.tab[aria-selected=true]{color:var(--goldtx);border-bottom-color:var(--goldtx)}
.tab .ct{font-size:10px;color:var(--muted);margin-left:5px}
.tl{list-style:none;margin:0;padding:0 0 0 20px;border-left:1px solid var(--line)}
.tl li{position:relative;padding:0 0 16px 14px}
.tl li::before{content:"";position:absolute;left:-25px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--card);border:2px solid var(--gold)}
.tl .when{font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.tl .what{font-size:12.5px;margin-top:1px;font-weight:600}
.tl .sum{font-size:12px;color:var(--muted);margin-top:2px}
.consent{border:1px solid var(--line);border-radius:8px;padding:11px 13px;background:var(--sunken);margin-bottom:10px}
.consent q{display:block;font-size:12.5px;margin:6px 0;quotes:"“" "”"}
/* the pipeline stepper (spec §11.7a): where this deal sits in the sequence */
.stepper{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.stg{flex:1 1 90px;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:var(--sunken);font-size:11.5px;color:var(--muted)}
.stg b{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.stg.done{color:var(--text)}
.stg.now{border-color:var(--goldtx);color:var(--goldtx);background:rgba(232,196,90,.08)}
.stg.lost{border-color:rgba(224,122,95,.5);color:var(--bad)}

/* ⌘K (spec §11.5) — an overlay may scroll: it floats above the page and cannot push it */
.scrim{position:fixed;inset:0;background:rgba(10,10,9,.72);z-index:90}
.pal{position:fixed;left:50%;top:12%;transform:translateX(-50%);width:min(620px,92vw);z-index:91;background:var(--card);
  border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.pal input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:15px 18px;font-size:15px;outline:none;color:var(--text)}
.pal input::placeholder{color:var(--muted)}
.palist{max-height:min(360px,60vh);overflow-y:auto;padding:6px;margin:0;list-style:none}
.palist .grp{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A8372;padding:9px 12px 4px}
.pitem{padding:9px 12px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;min-height:40px}
.pitem .ico{width:24px;height:24px;border-radius:6px;background:var(--sunken);border:1px solid var(--line);display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--goldtx);flex:0 0 auto}
.pitem .sub{font-size:11px;color:var(--muted);margin-left:auto;padding-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.pitem[aria-selected=true]{background:rgba(232,196,90,.12);box-shadow:inset 3px 0 0 var(--goldtx)}
.palfoot{border-top:1px solid var(--line);padding:7px 14px;font-size:10.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}

.app-foot{padding:7px 16px;border-top:1px solid var(--line);background:#161513;font-size:10.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.live-region{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:1100px){
  .rec{grid-template-columns:1fr} .rec aside{position:static;order:-1} .app .g2{grid-template-columns:1fr}
  .card.tbl{overflow-x:auto} .card.tbl table{min-width:max-content}
  .sysbar .hideM{display:none}
}
@media (max-width:1024px){
  .app{--rail:64px}
  .tile{justify-content:center;padding:0}
  .tile .lb,.rail-note{display:none}
  .navgrp{height:12px;padding:10px 0 2px;font-size:0}
  .navgrp::after{content:"";display:block;height:1px;background:var(--line);margin:5px 10px}
  .tile .sym{width:30px;height:30px;font-size:12px}
}
@media (max-width:640px){
  .app{--bar:56px;--rail:56px}
  body.demo .app{--band:26px}
  .app-band{font-size:11px}
  .sysbar{gap:9px;padding:0 10px}
  .sysbar .lg-wide{display:none} .sysbar .lg-small{display:block}
  .kbtn kbd,.kbtn .lbl{display:none} .kbtn .lblS{display:inline}
  .me .whoami{display:none}
  .rail{padding:8px 4px}
  .tile.on::before{left:-4px}
  .app .surface{padding:12px}
  .ctxbar{padding:0 12px}
  .acts input{width:150px}
  .summary{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.app *{animation:none!important;transition:none!important}}