/* XOC UI LAB · static synthetic demo · isolated from public XOC design */
:root{--navy:#13385f;--navy2:#214e7b;--ink:#203447;--muted:#60758a;--bg:#f6f8fb;--border:#d7e2ec;--green:#206d48;--greenbg:#eaf7ef;--greenborder:#9bd2b1;--bluebg:#ebf3fb;--greybg:#f0f2f5;--shadow:0 8px 24px rgba(18,50,80,.06);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.48;font-size:15px}
a{color:#1b5d8c;text-decoration:none}a:hover{text-decoration:underline}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}
.skip{position:absolute;left:-10000px;top:auto}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:12px}
.labstrip{background:#fff2cc;color:#62450e;border-bottom:1px solid #edce80;text-align:center;font-size:12px;padding:9px 12px;font-weight:700}
.shell{min-height:100vh}.sitehead{background:var(--navy);color:#fff;padding:20px max(16px,calc((100vw - 1050px)/2))}
.topline{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-weight:800;letter-spacing:.03em;font-size:12px;color:#bed6ef}
.headlinks{display:flex;gap:8px;flex-wrap:wrap}
.headlinks a{color:#d3e5f5;font-size:12px;padding:7px 9px;border:1px solid #52769a;border-radius:9px}
.headlinks a[aria-current=page]{background:#fff;color:#173a61}
.sitehead h1{font-size:clamp(23px,4vw,34px);margin:15px 0 5px;line-height:1.17}
.sitehead p{color:#d1e1f3;margin:0;font-size:13px}
.eyebrow{letter-spacing:.09em;color:#bfdaef;font-size:11px;font-weight:800;text-transform:uppercase;margin-top:19px}
.breadcrumb{margin-top:15px;font-size:13px}.breadcrumb a{color:#cde8ff}
.content{max-width:1050px;margin:auto;padding:20px 16px 64px}
.stack{display:grid;gap:15px}.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi,.panel,.record,.financial,.cta-panel,.alert{border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow)}
.kpi{background:white;padding:15px;min-width:0}.kpi .value{font-size:clamp(20px,3vw,30px);font-weight:800;line-height:1.2;color:#1d4e77}
.kpi .label{font-size:12px;color:var(--muted);margin-top:7px}.kpi .hint{font-size:11px;color:#73869a;margin-top:5px}
.panel{background:#fff;padding:19px}.panel h2,.sectionbar h2{font-size:18px;margin:0 0 12px}
.sectionbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.sectionbar h2{margin:0}.sectionbar small{color:var(--muted)}
.financial{background:#e6f0fb;border-color:#bdd3e8;padding:17px}
.financial.green{background:#e8f6ed;border-color:#b0dabe}.financial h2{font-size:15px;margin:0 0 12px;color:#224e75}
.financial.green h2{color:#216543}.fingrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fingrid strong{display:block;color:#174d74;font-size:clamp(15px,2.7vw,21px);white-space:nowrap}
.financial.green .fingrid strong{color:#1b6442}.fingrid span{color:#58718b;font-size:11px}.note{font-size:12px;color:var(--muted);margin:8px 0 0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;background:var(--navy2);color:white;font-size:13px;font-weight:750;padding:10px 13px;border-radius:9px;min-height:42px;text-align:center;text-decoration:none}
.button:hover{color:white;text-decoration:none;background:#153c61}.button.secondary{color:#245b83;background:#fff;border-color:#b7cfe3}.button.secondary:hover{color:#123d62;background:#e7f2fb}.button.green{background:#24774d}.button.green:hover{background:#195e3b}
.filters{display:grid;gap:11px}.searchbox{display:flex;align-items:center;gap:9px;border-radius:9px;background:#fff;border:1px solid #cedbe7;padding:10px 12px}
.searchbox input{min-width:0;width:100%;border:0;outline:0;color:var(--ink);background:transparent}
.filterrow{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid #cbd7e2;background:#edf1f5;color:#495e70;border-radius:40px;padding:7px 11px;font-size:12px;font-weight:700}
.chip[aria-pressed=true]{background:#215c8a;color:white;border-color:#215c8a}
select{width:100%;background:#fff;color:#20415e;border:1px solid #cbd7e2;padding:11px;border-radius:9px}
.recordlist{display:grid;gap:11px}
.record{background:#fff;padding:16px;display:grid;gap:8px;min-width:0}
.record.project{background:var(--bluebg);border-color:#bfd6eb}.record.contact{background:var(--greybg);border-color:#d6dce2}
.record.opportunity{background:var(--greenbg);border-color:var(--greenborder);border-left:4px solid #238758}
.record .kind{color:#506f88;font-size:10px;font-weight:850;letter-spacing:.065em;text-transform:uppercase}
.record.opportunity .kind,.record.opportunity .recordtitle{color:#1c6743}
.recordtitle{font-size:16px;font-weight:750;margin:0;color:#174466}
.record .row,.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.muted{color:var(--muted);font-size:12px}.record .meta{color:#536e82;font-size:13px;margin:0}.record.opportunity .meta{color:#48765a}
.badge{border:1px solid #c9d8e5;border-radius:50px;padding:4px 8px;font-size:11px;font-weight:750;color:#355d7d;background:#fff;white-space:nowrap}
.badge.good{color:#236b45;background:#d7eddf;border-color:#a9d7b9}.badge.warn{color:#80581d;background:#fff4dd;border-color:#e5d0a2}
.progress{height:7px;background:#cce5d5;border-radius:20px;overflow:hidden}.progress span{display:block;height:100%;background:#2d9860;border-radius:20px}
.recordactions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.recordactions a{font-size:12px;font-weight:750}
.recordgroup{background:#e7edf4;color:#27516e;border:1px solid #d3e0eb;padding:10px 12px;border-radius:9px;font-weight:750;font-size:13px}
.detailgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:15px}
.info{display:grid;gap:0}.info .inforow{display:grid;grid-template-columns:38% 62%;gap:8px;border-bottom:1px solid #edf1f5;padding:10px 0;font-size:13px}
.info .inforow:last-child{border-bottom:0}.inforow .label{color:var(--muted)}.inforow .value{font-weight:650;color:#264762}
.cta-panel{background:#e7f6ee;border-color:#add7bd;padding:17px}.cta-panel h2{color:#206b45;font-size:16px;margin:0 0 6px}.cta-panel p{color:#48785d;font-size:12px;margin:0 0 12px}
.notice{background:#fff6e5;border:1px solid #e4d3a7;border-radius:10px;padding:13px;font-size:12px;color:#785b2d}
.alert{padding:14px;background:#eaf3fa;border-color:#c6dbe8;font-size:12px;color:#365d79}
.accordion{border:1px solid #d3e3d8;border-radius:10px;background:#fff;margin-bottom:9px;overflow:hidden}
.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px;font-weight:700;font-size:13px;color:#255c41}
.accordion summary::-webkit-details-marker{display:none}.accordion summary:after{content:"⌄";color:#59836b}.accordion[open] summary:after{content:"⌃"}
.accordion ol{margin:0;padding:4px 18px 14px 33px;font-size:12px;color:#546c5b}.accordion li{margin:7px 0}
.milestone{display:flex;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid #e3eee7;font-size:13px}
.milestone:last-child{border-bottom:0}.milestone .status{font-size:11px;color:#26784f;font-weight:800}
.milestone .status.pending{color:#8b692b}.fill{flex:1}
.tasklist{display:grid;gap:11px}.tasklist label{display:flex;align-items:flex-start;gap:9px;font-size:13px}.tasklist input{width:17px;height:17px;accent-color:#22744b}
.guide{font-size:12px;color:var(--muted)}.demoaction{border:1px solid #c7d8e8;background:#fff;color:#225980;border-radius:9px;padding:10px 12px;font-weight:700;font-size:12px}
.demoaction:hover{background:#eff6fb}.message{display:none;border:1px solid #a8d4b7;background:#e7f5ed;color:#236441;padding:12px;border-radius:10px;font-size:12px}
.message.visible{display:block}
.navtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.navtile{padding:20px;border:1px solid #cbdce9;border-radius:13px;background:#fff;display:grid;gap:8px}
.navtile h2{margin:0;color:#17466c;font-size:18px}.navtile p{font-size:12px;color:#64778b;margin:0}
.navtile .actionlink{font-weight:750;font-size:13px;margin-top:7px}
.footer{border-top:1px solid #dce5ec;padding:16px;text-align:center;color:#66798b;font-size:11px;background:#fff}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #e1a938;outline-offset:2px}
@media(max-width:720px){.two-col,.detailgrid,.navtiles{grid-template-columns:1fr}.sitehead{padding:17px 16px}.content{padding:16px 12px 50px}.headlinks a{font-size:11px;padding:6px}.kpi{padding:11px}.kpi .label{font-size:11px}.fingrid span{font-size:10px}.panel{padding:15px}.record{padding:14px}}
@media(max-width:360px){.kpis{gap:6px}.kpi{padding:8px}.kpi .value{font-size:19px}.fingrid strong{font-size:14px}.headlinks{gap:4px}}