/* Ledgrix Control Center – design system 2 (Nov 2026)
   Petrol sidebar, mist canvas, IBM Plex Sans (self-hosted, SIL OFL). Icons: Lucide (ISC), static/icons.svg.
   All class names of design 1 are kept, so every page takes the new look without template changes. */
@font-face{font-family:"Plex";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --petrol:#0E4B5A;--petrol-d:#0A3843;--petrol-l:#E3EEF0;
  --ink:#12303A;--text:#30454D;--soft:#61757C;
  --mist:#EEF3F4;--paper:#FFFFFF;--rule:#D6E1E3;--rule-s:#E7EEEF;
  --amber:#E8A23A;--amber-bg:#FDF3E1;--amber-t:#8A5A0B;
  --leaf:#2E9E6B;--leaf-bg:#E3F4EC;--leaf-t:#1C6B47;
  --coral:#D2553F;--coral-bg:#FBE9E5;--coral-t:#9B2F1D;
  --sky-bg:#E5EFF8;--sky-t:#1F4F7A;
  --r-s:6px;--r-m:10px;--r-l:16px;
  --shadow:0 1px 2px rgba(14,75,90,.06),0 4px 14px rgba(14,75,90,.06);
  /* legacy names used in a few templates */
  --navy:var(--petrol);--brand:var(--petrol);--brand-d:var(--petrol-d);--alt:var(--mist);--ok:var(--leaf-t);--warn:var(--amber-t);--err:var(--coral-t)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;color:var(--text);background:var(--mist);font-variant-numeric:tabular-nums}
a{color:var(--petrol)}a:hover{color:var(--petrol-d)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.ic{width:20px;height:20px;flex:0 0 auto;vertical-align:-4px}
.ic.s{width:16px;height:16px;vertical-align:-3px}.ic.l{width:26px;height:26px}

/* ---------- shell: sidebar + content ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--petrol);color:#DCEBEE;display:flex;flex-direction:column;gap:4px;padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:4px 10px 16px}
.brand .mark{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center}
.brand b{display:block;font-size:17px;font-weight:700;letter-spacing:.01em}.brand small{display:block;font-size:12px;opacity:.75;line-height:1.2}
.side .grp{font-size:12px;color:#9FC3CA;padding:14px 10px 4px}
.side a.nav{display:flex;align-items:center;gap:11px;color:#DCEBEE;text-decoration:none;padding:9px 10px;border-radius:var(--r-s);font-size:14.5px}
.side a.nav:hover{background:rgba(255,255,255,.08);color:#fff}
.side a.nav.on{background:#fff;color:var(--petrol);font-weight:600}
.side .proj{margin:6px 0 2px;padding:10px;border-radius:var(--r-m);background:rgba(255,255,255,.07)}
.side .proj b{display:block;color:#fff;font-size:14px}.side .proj span{font-size:12.5px;opacity:.8}
.side .spacer{flex:1}
.side .me{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid rgba(255,255,255,.12);margin-top:8px}
.side .me a{color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.side .me button.link{color:#9FC3CA;font-size:13px;text-decoration:none}
.content{min-width:0;display:flex;flex-direction:column}
main{width:100%;max-width:1280px;margin:0 auto;padding:26px 30px 10px;flex:1}
.foot{color:var(--soft);font-size:12px;padding:18px 30px;text-align:center}
/* legacy header pieces (auth pages without sidebar) */
.top{display:flex;align-items:center;justify-content:center;padding:28px 20px 0}
.top .brand{color:var(--petrol)}.top .brand small{color:var(--soft);opacity:1}
.projnav{display:none}
@media(max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:10px;gap:2px;align-items:center}
  .brand{padding:0 8px 0 2px}.brand small,.side .grp,.side .spacer,.side .proj span{display:none}
  .side a.nav{white-space:nowrap;padding:8px 10px}
  .side .proj{margin:0 4px;padding:6px 10px;white-space:nowrap}
  .side .me{border:0;margin:0;padding:0 6px;white-space:nowrap}
  main{padding:18px 16px 10px}
}

/* ---------- type ---------- */
h1{font-size:26px;line-height:1.25;color:var(--ink);font-weight:700;margin:2px 0 16px}
h2{font-size:18px;color:var(--ink);font-weight:600;margin:24px 0 10px}
h3{font-size:15.5px;color:var(--ink);font-weight:600;margin:16px 0 8px}
.small{font-size:13px}.muted{color:var(--soft)}.right{text-align:right}.nowrap{white-space:nowrap}
.ok{color:var(--leaf-t);font-weight:600}.err{color:var(--coral-t);font-weight:600;white-space:pre-wrap}

/* ---------- surfaces ---------- */
.card{background:var(--paper);border:1px solid var(--rule-s);border-radius:var(--r-l);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card .card{box-shadow:none;border-color:var(--rule);border-radius:var(--r-m)}
.cols{display:grid;gap:18px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:960px){.cols{grid-template-columns:1fr}}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px}
.kpi{background:var(--paper);border:1px solid var(--rule-s);border-radius:var(--r-m);padding:14px 16px;box-shadow:var(--shadow)}
.kpi b{display:block;font-size:26px;color:var(--ink)}.kpi span{color:var(--soft);font-size:13px}.kpi.alert b{color:var(--coral)}
details{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:10px 14px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600;color:var(--ink)}
.warnbox{background:var(--amber-bg);border:1px solid #F1D49C;border-left:4px solid var(--amber);border-radius:var(--r-m);padding:11px 14px;margin-bottom:14px;color:#5B4210}
.guidebox{background:var(--petrol-l);border-color:#C5DCE0}
.flash{padding:11px 16px;border-radius:var(--r-m);background:var(--leaf-bg);border:1px solid #B9E0CC;border-left:4px solid var(--leaf);margin-bottom:14px;color:#174E36}
.flash.error{background:var(--coral-bg);border-color:#F2C2B8;border-left-color:var(--coral);color:#7A2516}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--paper)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-s);vertical-align:top}
th{background:#F5F8F9;font-weight:600;font-size:13px;color:var(--soft)}
tr:last-child td{border-bottom:0}tr.blocked td{background:#FFF8EE}
.tbl{overflow-x:auto;border:1px solid var(--rule-s);border-radius:var(--r-m);margin-bottom:14px;background:var(--paper)}
table.md{margin:8px 0}table.md th{background:#F5F8F9}

/* ---------- forms ---------- */
.fld{display:block;margin:0 0 12px}.fld span{display:block;font-weight:600;font-size:13px;margin-bottom:4px;color:var(--ink)}.fld small{color:var(--soft)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{width:100%;padding:9px 11px;border:1px solid #B9C9CC;border-radius:var(--r-s);font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--petrol);outline:3px solid rgba(14,75,90,.15);outline-offset:0}
textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:720px){.row2,.row3{grid-template-columns:1fr}}
button,.btn{display:inline-flex;align-items:center;gap:8px;background:var(--petrol);color:#fff;border:1px solid var(--petrol);border-radius:var(--r-s);padding:8px 16px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:none;line-height:1.3}
button:hover,.btn:hover{background:var(--petrol-d);border-color:var(--petrol-d);color:#fff}
button.sec,.btn.sec{background:#fff;color:var(--petrol);border-color:#9DBDC3}button.sec:hover,.btn.sec:hover{background:var(--petrol-l)}
button.danger,.btn.danger{background:var(--coral);border-color:var(--coral);color:#fff}
button.link{background:none;border:0;padding:0;font-weight:400;color:inherit;text-decoration:underline}
form.inline{display:inline}

/* ---------- status vocabulary ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;background:var(--mist);color:var(--text)}
.badge.grey{background:#E8ECED}.badge.red{background:var(--coral-bg);color:var(--coral-t)}.badge.amber{background:var(--amber-bg);color:var(--amber-t)}.badge.green{background:var(--leaf-bg);color:var(--leaf-t)}
.st{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;background:#E8ECED}
.st-in_progress,.st-in_discovery,.st-ready{background:var(--sky-bg);color:var(--sky-t)}.st-blocked,.st-failed_validation{background:var(--coral-bg);color:var(--coral-t)}
.st-awaiting_review{background:var(--amber-bg);color:var(--amber-t)}.st-completed{background:var(--leaf-bg);color:var(--leaf-t)}.st-accepted{background:#CBEBDB;color:#11533A;font-weight:600}
.st-out_of_scope{background:#F1F3F3;color:#7C8A8E;text-decoration:line-through}
.vf{display:inline-block;padding:0 6px;border-radius:4px;font-size:11.5px;font-weight:600}.vf-verified{background:var(--leaf-bg);color:var(--leaf-t)}.vf-expert{background:var(--amber-bg);color:var(--amber-t)}.vf-unverified{background:var(--coral-bg);color:var(--coral-t)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tabs a{padding:7px 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;text-decoration:none;font-size:13.5px;color:var(--text)}
.tabs a.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.bar{display:inline-block;width:110px;height:8px;background:#E1E9EA;border-radius:4px;vertical-align:middle;overflow:hidden}.bar span{display:block;height:100%;background:var(--leaf)}
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* ---------- task / knowledge details (unchanged roles) ---------- */
.steps li{margin-bottom:12px}.steps dl{display:grid;grid-template-columns:150px 1fr;gap:2px 10px;margin:6px 0 0;font-size:14px}.steps dt{color:var(--soft)}.steps dd{margin:0}
@media(max-width:720px){.steps dl{grid-template-columns:1fr}}
.crit{padding-left:0}.crit li{list-style:none;margin:3px 0}.crit .y::before{content:"✔ ";color:var(--leaf)}.crit .n::before{content:"✖ ";color:var(--coral)}.crit .na::before{content:"– ";color:#99A}
.chat .m{padding:10px 12px;border-radius:8px;margin-bottom:8px;white-space:pre-wrap}.chat .user{background:var(--sky-bg)}.chat .assistant{background:#fff;border:1px solid var(--rule)}
.codes{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;columns:2}
pre.kb{white-space:pre-wrap;font-family:inherit;background:#fff;border:1px solid var(--rule);border-radius:var(--r-m);padding:14px}
.authbox{max-width:440px;margin:26px auto 40px;background:var(--paper);border:1px solid var(--rule-s);border-radius:var(--r-l);padding:26px 28px;box-shadow:var(--shadow)}
.qr{background:#fff;padding:10px;border:1px solid var(--rule);display:inline-block}.qr img{width:220px;height:220px}
.chatlog{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.msg{border:1px solid var(--rule-s);border-radius:var(--r-m);padding:10px 14px;background:#fff;max-width:900px}
.msg.user{background:var(--petrol-l);align-self:flex-end}.msg p{margin:4px 0}
.prose h2,.prose h3,.prose h4{margin:16px 0 6px}.prose ul,.prose ol{padding-left:22px}
pre.mdtable{background:#F5F8F9;border:1px solid var(--rule);border-radius:6px;padding:8px;overflow-x:auto;font-size:12.5px}
ol.guides{margin:8px 0 0;padding-left:4px;list-style:none}ol.guides li{margin:3px 0}.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ---------- dashboard ---------- */
.hello{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center;background:var(--paper);border:1px solid var(--rule-s);border-radius:var(--r-l);padding:22px 26px;margin-bottom:20px;box-shadow:var(--shadow);overflow:hidden}
.hello h1{margin:0 0 6px;font-size:28px}.hello p{margin:0;color:var(--soft);max-width:60ch}
.hello img{width:100%;height:auto;display:block}
@media(max-width:860px){.hello{grid-template-columns:1fr}.hello img{max-width:280px}}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.quick a{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--rule-s);text-decoration:none;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.quick a:hover{border-color:#9DBDC3;background:#FBFDFD}
.quick .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--petrol-l);color:var(--petrol)}
.quick small{display:block;font-weight:400;color:var(--soft);font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:24px}
.tile{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--rule-s)}
.tile .ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--petrol)}
.tile b{display:block;font-size:24px;line-height:1.1;color:var(--ink)}.tile span{font-size:13px;color:var(--soft)}
.tile.hot{border-color:#F2C2B8;background:#FFF9F7}.tile.hot .ico{background:var(--coral-bg);color:var(--coral)}.tile.hot b{color:var(--coral-t)}
.tile.good .ico{background:var(--leaf-bg);color:var(--leaf)}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin-bottom:22px}
.pcard{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--rule-s);border-radius:var(--r-l);padding:18px;box-shadow:var(--shadow);color:inherit;text-decoration:none}
.pcard:hover{border-color:#9DBDC3}
.pcard .head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pcard .code{font-size:12.5px;color:var(--soft)}.pcard h3{margin:2px 0 0;font-size:17px}
.pcard .facts{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--soft)}
.pcard .facts span{display:inline-flex;gap:5px;align-items:center}
.pcard .facts .hot{color:var(--coral-t);font-weight:600}
/* the memorable piece: SAP Activate track, one segment per phase */
.track{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.track i{display:block;height:9px;border-radius:3px;background:#E1E9EA;position:relative;overflow:hidden}
.track i b{position:absolute;inset:0 auto 0 0;background:var(--leaf)}
.track i.cur{outline:2px solid var(--amber);outline-offset:1px}
.track-l{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11.5px;color:var(--soft)}
.track-l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;background:var(--paper);border:1px dashed #A9C4C9;border-radius:var(--r-l);padding:22px}
.empty img{width:100%}@media(max-width:700px){.empty{grid-template-columns:1fr}.empty img{max-width:180px}}
.sidelist .row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--rule-s);font-size:14px}.sidelist .row:last-child{border:0}
.sidelist .ico{color:var(--petrol);margin-top:2px}
@media(prefers-reduced-motion:no-preference){.pcard,.quick a{transition:border-color .15s,background .15s}}
/* refinements after first screenshot review */
.shell{background:linear-gradient(to right,var(--petrol) 248px,transparent 248px)}
@media(max-width:960px){.shell{background:none}}
.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.hello{padding:20px 26px}
/* sign-in */
[hidden]{display:none!important}
button.big,.btn.big{display:flex;width:100%;justify-content:center;padding:12px 16px;font-size:15.5px;margin:6px 0}
.center{text-align:center}
.or{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:13px;margin:18px 0 10px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--rule)}
.authbox details{margin-top:16px}

/* ===== design 2.1 (4 Nov 2026): pictures, project app page, library ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;color:var(--soft);margin:0 0 12px}
.crumbs a{text-decoration:none;display:inline-flex;gap:5px;align-items:center}
/* covers & tiles (images in static/img) */
.cover-fi-basics{background-image:url(img/cover-fi-basics.jpg)}.cover-fi-tax-ap-ar{background-image:url(img/cover-fi-tax-ap-ar.jpg)}
.cover-fi-bank{background-image:url(img/cover-fi-bank.jpg)}.cover-fi-aa-close-co{background-image:url(img/cover-fi-aa-close-co.jpg)}
.cover-ops-gl-ap{background-image:url(img/cover-ops-gl-ap.jpg)}.cover-ops-ar-aa-close{background-image:url(img/cover-ops-ar-aa-close.jpg)}
.cover-kb{background-image:url(img/cover-kb.jpg)}
.tile-new{background-image:url(img/tile-new.jpg)}.tile-projects{background-image:url(img/tile-projects.jpg)}
.tile-knowledge{background-image:url(img/tile-knowledge.jpg)}.tile-team{background-image:url(img/tile-team.jpg)}
[class*="cover-"],.pic{background-size:cover;background-position:center}
/* dashboard banner */
.hello.banner{display:block;min-height:210px;background:linear-gradient(90deg,rgba(6,35,42,.82) 0%,rgba(6,35,42,.45) 45%,rgba(6,35,42,0) 75%),#0A3843 url(img/banner.jpg) center 60%/cover no-repeat;border:0;color:#fff;padding:34px 34px}
.hello.banner h1{color:#fff;font-size:32px}.hello.banner p{color:#D7E9EC}.hello.banner .hot{color:#FFD08A}
.quick.pics a{flex-direction:column;align-items:stretch;padding:0;gap:0;overflow:hidden}
.quick.pics .pic{display:block;height:96px}
.quick.pics .txt{padding:12px 16px 14px}
.quick.pics a:hover .pic{filter:saturate(1.15) brightness(1.05)}
/* project hero */
.phero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--paper);border:1px solid var(--rule-s);border-radius:var(--r-l);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:8px;background-image:linear-gradient(90deg,#fff 50%,rgba(255,255,255,.80)),url(img/banner.jpg);background-size:cover;background-position:center}
.phero h1{margin:0 0 6px}.phero .chips .badge{margin-right:6px}.phero p{margin:4px 0}
.pactions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
.agentbtn{background:linear-gradient(135deg,#E8A23A,#D98A1F);border-color:#D98A1F;color:#2B1B00;padding:10px 18px;font-size:15.5px}
.agentbtn:hover{background:#D98A1F;border-color:#C27812;color:#1A1000}
details.more{position:relative;background:none;border:0;padding:0;margin:0}
details.more>summary{list-style:none}details.more>summary::-webkit-details-marker{display:none}
details.more .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:300px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px}
.ring{width:96px;height:96px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--leaf) var(--p,0%),#E1E9EA 0);position:relative}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.ring b,.ring span{position:relative}.ring b{font-size:22px;color:var(--ink);line-height:1}.ring span{font-size:12px;color:var(--soft)}
.r0{--p:0%}.r5{--p:5%}.r10{--p:10%}.r15{--p:15%}.r20{--p:20%}.r25{--p:25%}.r30{--p:30%}.r35{--p:35%}.r40{--p:40%}.r45{--p:45%}.r50{--p:50%}.r55{--p:55%}.r60{--p:60%}.r65{--p:65%}.r70{--p:70%}.r75{--p:75%}.r80{--p:80%}.r85{--p:85%}.r90{--p:90%}.r95{--p:95%}.r100{--p:100%}
@media(max-width:900px){.phero{grid-template-columns:auto 1fr}.pactions{grid-column:1/-1;justify-content:flex-start}}
/* the 7 phases as app tiles */
.phases{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:8px}
@media(max-width:1180px){.phases{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:620px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.phase{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 12px 12px;border-radius:var(--r-m);color:#fff;text-decoration:none;min-height:168px;overflow:hidden;box-shadow:var(--shadow)}
.phase::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 18px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 18px);pointer-events:none}
.phase b{font-size:16px}.phase small{font-size:12px;opacity:.88;line-height:1.3}
.phase .pico{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;margin-bottom:4px}
.phase .pnum{position:absolute;right:10px;top:4px;font-size:44px;font-weight:700;opacity:.16;line-height:1}
.phase .bar{width:100%;background:rgba(255,255,255,.25);margin-top:auto}.phase .bar span{background:#fff}
.phase:hover{color:#fff;transform:translateY(-1px)}
.phase.cur{outline:3px solid var(--amber);outline-offset:2px}
.ph0{background:linear-gradient(150deg,#0E4B5A,#2A7383)}.ph1{background:linear-gradient(150deg,#1C5B7A,#3B7EA8)}
.ph2{background:linear-gradient(150deg,#3E3A73,#5B4E9A)}.ph3{background:linear-gradient(150deg,#0A3843,#15707F)}
.ph4{background:linear-gradient(150deg,#5A3B2E,#B36A3B)}.ph5{background:linear-gradient(150deg,#7A2E3A,#C2505E)}
.ph6{background:linear-gradient(150deg,#13525E,#2E9E6B)}
/* section launcher */
.sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-bottom:22px}
.sections a{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--rule-s);text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.sections a:hover{border-color:#9DBDC3;background:#FBFDFD}
.sections .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--petrol-l);color:var(--petrol);margin-bottom:6px}
.sections b{font-size:14.5px}.sections small{font-size:12.5px;color:var(--soft)}
.person{display:flex;gap:10px;align-items:center;padding:6px 0;font-size:14px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--petrol);color:#fff;display:grid;place-items:center;font-weight:600}
/* agent hub */
.agenthero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:center;background:linear-gradient(135deg,#FFF8EC,#FDF3E1);border:1px solid #F1D49C;border-radius:var(--r-l);padding:22px;margin-bottom:16px}
.agenthero h1{display:flex;gap:10px;align-items:center;margin:0 0 8px}.agenthero p{margin:0;color:#5B4210}
.howto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.howto li{background:#fff;border:1px solid #F1D49C;border-radius:var(--r-m);padding:12px;display:flex;flex-direction:column;gap:3px}
.howto .ico{width:36px;height:36px;border-radius:10px;background:var(--amber-bg);color:#8A5A0B;display:grid;place-items:center}
.howto small{color:var(--soft);font-size:12.5px}
@media(max-width:900px){.agenthero{grid-template-columns:1fr}.howto{grid-template-columns:1fr}}
.startagent{border-left:4px solid var(--amber)}
/* knowledge library */
.kbhero{background:linear-gradient(90deg,rgba(20,16,10,.82),rgba(20,16,10,.35) 60%,rgba(20,16,10,.15)),#2A2118 url(img/kb-hero.jpg) center/cover no-repeat;color:#fff;border-radius:var(--r-l);padding:34px;margin-bottom:22px}
.kbhero h1{color:#fff;font-size:30px;margin:0 0 6px}.kbhero p{color:#EFE6DA;max-width:62ch;margin:0 0 16px}
.kbsearch{display:flex;gap:8px;max-width:640px}.kbsearch input{padding:12px 14px;font-size:15.5px;border:0}
.kbsearch button{background:var(--amber);border-color:var(--amber);color:#2B1B00;padding:0 18px}
.shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:26px}
.book{background:var(--paper);border:1px solid var(--rule-s);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.book .cover{display:block;height:150px;position:relative}
.book .vol,.areahero .vol,.arthero .vol{display:inline-block;background:rgba(0,0,0,.35);color:#fff;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600}
.book .cover .vol{position:absolute;left:14px;top:12px}
.bookbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.bookbody h3{margin:0;font-size:16.5px}.bookbody h3 a{text-decoration:none;color:var(--ink)}
.peek{list-style:none;margin:2px 0 8px;padding:0;font-size:13.5px}.peek li{padding:3px 0;border-bottom:1px dashed var(--rule-s)}.peek a{text-decoration:none}
.bookbody .btn{align-self:flex-start;margin-top:auto}
.kbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.kbcard{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--rule-s);text-decoration:none;color:var(--ink)}
.kbcard:hover{border-color:#9DBDC3}.kbcard .ico{width:36px;height:36px;border-radius:10px;background:#ECEBF8;color:#3E3A73;display:grid;place-items:center}
.kbcard small{color:var(--soft);font-size:12.5px}
.results{display:flex;flex-direction:column;gap:10px}
.result{display:flex;gap:14px;align-items:flex-start;padding:12px;background:#fff;border:1px solid var(--rule-s);border-radius:var(--r-m);text-decoration:none;color:var(--ink)}
.result .thumb{flex:0 0 84px;height:56px;border-radius:8px}
.areahero,.arthero{border-radius:var(--r-l);color:#fff;padding:30px;margin-bottom:18px;position:relative;overflow:hidden}
.areahero::before,.arthero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05))}
.areahero>div,.arthero>div{position:relative;max-width:62ch}.areahero h1,.arthero h1{color:#fff;margin:8px 0}.areahero p{color:#EEF}
.arthero{padding:22px 26px}.arthero h1{font-size:24px}
.steplist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.steplist a{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#fff;border:1px solid var(--rule-s);border-radius:var(--r-m);text-decoration:none;color:var(--ink)}
.steplist a:hover{border-color:#9DBDC3}.steplist .seq{flex:0 0 52px;height:36px;border-radius:8px;background:var(--petrol-l);color:var(--petrol);display:grid;place-items:center;font-weight:700;font-size:13px}
.steplist .t{flex:1;display:flex;flex-direction:column}.steplist small{color:var(--soft)}
.reading{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.reading .prose{max-width:none;font-size:15.5px;line-height:1.65}
.toc{position:sticky;top:16px;max-height:80vh;overflow:auto}.toc ol{list-style:none;padding:0;margin:0;font-size:13.5px}
.toc li{padding:4px 0}.toc li a{text-decoration:none}.toc li.here{font-weight:700}.toc li.here a{color:var(--ink)}
@media(max-width:1000px){.reading{grid-template-columns:1fr}.toc{position:static}}
body.authpage{background:linear-gradient(rgba(6,35,42,.35),rgba(6,35,42,.55)),#0A3843 url(img/login.jpg) center/cover fixed no-repeat}
body.authpage .top .brand b,body.authpage .top .brand small{color:#fff}body.authpage .foot{color:#CFE3E7}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.pagehead h1{display:flex;gap:10px;align-items:center}
/* project password */
.pcard.locked{background:linear-gradient(135deg,#F4F7F8,#fff);border-style:dashed}
.pcard.locked h3{color:var(--soft)}
.card.unlock{max-width:520px;margin:30px auto}
.card.unlock h1{display:flex;gap:10px;align-items:center;font-size:24px}

/* ---------- Implementation Center + learning paths (Nov 2026) ---------- */
.m-greenfield{--mc:#1f8a70;--mc-d:#146b56;--mc-bg:#e8f6f0}
.m-brownfield{--mc:#b86b1f;--mc-d:#8f5216;--mc-bg:#fbf1e4}
.m-sdt{--mc:#2f6fb5;--mc-d:#225691;--mc-bg:#e8f1fb}
.eyebrow{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mc,var(--petrol))}
.btn.mbtn,button.mbtn{background:var(--mc,var(--petrol));border-color:var(--mc,var(--petrol));color:#fff}
.btn.mbtn:hover,button.mbtn:hover{background:var(--mc-d,var(--petrol-d));border-color:var(--mc-d,var(--petrol-d))}
.ichero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:center;padding:26px 28px;margin-bottom:22px;
  border-radius:var(--r-l);color:#fff;background:linear-gradient(120deg,rgba(10,56,67,.95),rgba(14,75,90,.82)),url(img/banner.jpg) center/cover;box-shadow:var(--shadow)}
.ichero.learn{grid-template-columns:1fr;background:linear-gradient(120deg,rgba(10,56,67,.92),rgba(14,75,90,.6)),url(img/learn.jpg) center 30%/cover}
.ichero h1{margin:0 0 6px;color:#fff;font-size:28px}.ichero p{margin:0;color:#dcecef;max-width:62ch}.ichero .eyebrow{color:#9fe0d0}
.ic3{display:grid;gap:10px}.ic3>div{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.1)}
.ic3 .ico{grid-row:span 2;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.ic3 b{color:#fff}.ic3 small{color:#cfe3e7}
.methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule-s);border-top:5px solid var(--mc);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow)}
.mphoto{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--mc-bg)}
.mphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}.mcard:hover .mphoto img{transform:scale(1.04)}
.mtag{position:absolute;left:12px;bottom:12px;display:inline-flex;gap:6px;align-items:center;padding:5px 12px;border-radius:999px;background:var(--mc);color:#fff;font-weight:600;font-size:13px}
.mbody{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.mbody h2{margin:0;font-size:20px;color:var(--ink)}.mbody p{margin:0}
.when{margin:4px 0;padding-left:18px;font-size:13.5px}
.mfacts{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--soft);margin:4px 0}
.mfacts span{display:inline-flex;gap:5px;align-items:center}
.mbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.mhero{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;align-items:center;background:linear-gradient(120deg,#fff 0%,var(--mc-bg) 100%);
  border:1px solid var(--rule-s);border-left:6px solid var(--mc);border-radius:var(--r-l);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.mhero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}
.mhero h1{margin:0 0 6px;font-size:28px;color:var(--ink)}.mhero p{margin:0 0 8px}
.ctxpick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;margin:0 0 16px;background:#fff;border:1px solid var(--rule-s);border-radius:var(--r-m)}
.ctxpick label{font-weight:600;color:var(--ink);display:inline-flex;gap:6px;align-items:center}.ctxpick select{min-width:260px;max-width:100%}
.phases.life .phase{min-height:150px}
.agentcard{border-left:5px solid var(--mc)!important;background:linear-gradient(180deg,var(--mc-bg),#fff 40%)}
.agentcard h2,.agentcard h3{display:flex;gap:8px;align-items:center;color:var(--mc-d)}
details.kbsec{border:1px solid var(--rule-s);border-radius:var(--r-m);padding:8px 12px;margin:8px 0;background:#fff}
details.kbsec summary{cursor:pointer;font-weight:600;color:var(--ink)}
.kbtext{font-size:14.5px;line-height:1.6;margin-top:8px}.kbtext table{font-size:13px}
.phstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 12px}
.phstrip a{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:999px;background:#fff;border:1px solid var(--rule);color:var(--soft);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden}
.phstrip a.on{background:var(--mc);border-color:var(--mc);color:#fff}.phstrip a:hover{border-color:var(--mc);color:var(--mc-d)}.phstrip a.on:hover{color:#fff}
.phhead{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;margin-bottom:14px;border-radius:var(--r-l);
  background:linear-gradient(120deg,#fff 0%,var(--mc-bg) 100%);border:1px solid var(--rule-s);border-left:6px solid var(--mc);box-shadow:var(--shadow)}
.phhead h1{margin:0 0 4px;font-size:26px;color:var(--ink)}.phhead p{margin:0}
.phnum{width:64px;height:64px;border-radius:18px;background:var(--mc);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:700}
.phnav{display:flex;gap:8px;flex-wrap:wrap}
.exitbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-radius:var(--r-m);margin-bottom:14px}
.exitbox.ok{background:var(--leaf-bg);color:var(--leaf-t)}.exitbox.warn{background:var(--amber-bg);color:var(--amber-t)}
.tablist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--rule);padding-bottom:8px}
.tablist button{background:#fff;color:var(--text);border:1px solid var(--rule);font-weight:600;font-size:14px;padding:7px 12px}
.tablist button.on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.tablist button:hover{background:var(--petrol-l);color:var(--ink)}.tablist button.on:hover{background:var(--petrol-d);color:#fff}
.tablist .cnt{background:rgba(0,0,0,.08);border-radius:999px;padding:0 7px;font-size:12px}
.tabs:not(.js) .tabpanel{margin-bottom:22px}
.steplist.big li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;background:#fff;border:1px solid var(--rule-s);border-radius:var(--r-m)}
.steplist.big .sn{flex:0 0 32px;height:32px;border-radius:50%;background:var(--mc,var(--petrol));color:#fff;display:grid;place-items:center;font-weight:700}
.phhead~.tabs .steplist.big .sn{background:var(--petrol)}
ul.checks,ul.warns{list-style:none;padding:0;margin:0}
ul.checks li,ul.warns li{position:relative;padding:6px 0 6px 28px;border-bottom:1px dashed var(--rule-s)}
ul.checks li::before{content:"✓";position:absolute;left:4px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--leaf-bg);color:var(--leaf-t);font-size:12px;display:grid;place-items:center;font-weight:700}
ul.warns li::before{content:"!";position:absolute;left:4px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--coral-bg);color:var(--coral-t);font-size:12px;display:grid;place-items:center;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.learnlink{display:flex!important;gap:14px;align-items:center;text-decoration:none;color:var(--ink)}
.learnlink img{width:140px;height:80px;object-fit:cover;border-radius:10px}.learnlink .ico{width:44px;height:44px;border-radius:12px;background:var(--petrol-l);display:grid;place-items:center}
.learnlink:hover{border-color:#9DBDC3}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 12px}
.mode{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--rule);border-radius:var(--r-m);background:#fff;cursor:pointer}
.mode span{display:flex;flex-direction:column}.mode small{color:var(--soft)}.mode:has(input:checked){border-color:var(--mc,var(--petrol));box-shadow:0 0 0 2px var(--mc-bg,var(--petrol-l))}
.phfoot{display:flex;justify-content:space-between;gap:10px;margin:18px 0}
.lpaths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
.lpath{display:flex;gap:12px;align-items:center;padding:10px;background:#fff;border:1px solid var(--rule-s);border-left:5px solid var(--mc);border-radius:var(--r-m);text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.lpath img{width:110px;height:62px;object-fit:cover;border-radius:8px}.lpath span{display:flex;flex-direction:column}.lpath small{color:var(--soft)}
.modules{display:grid;gap:16px}
.module{background:#fff;border:1px solid var(--rule-s);border-left:5px solid var(--mc);border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--shadow)}
.module header{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}
.module h2{margin:0;font-size:19px;color:var(--ink)}.module header p{margin:2px 0 0}
.modn{width:44px;height:44px;border-radius:12px;background:var(--mc);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:12px 0}
.lessoncard{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--rule);border-radius:var(--r-m);text-decoration:none;color:var(--ink);background:var(--mc-bg)}
.lessoncard span:last-child{display:flex;flex-direction:column}.lessoncard small{color:var(--soft)}
.lessoncard .ln{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--mc-d)}
.lessoncard.done .ln{background:var(--leaf);color:#fff}.lessoncard:hover{border-color:var(--mc)}
details.quiz{border-top:1px dashed var(--rule);padding-top:10px}details.quiz summary{cursor:pointer;font-weight:600;color:var(--mc-d)}
fieldset.qq{border:1px solid var(--rule-s);border-radius:var(--r-m);margin:10px 0;padding:10px 14px}
fieldset.qq legend{font-weight:600;color:var(--ink);padding:0 4px}fieldset.qq label{display:block;padding:3px 0}
fieldset.qq.ok{border-color:var(--leaf);background:var(--leaf-bg)}fieldset.qq.bad{border-color:var(--coral);background:var(--coral-bg)}
.exercise{background:var(--amber-bg);border-color:#f0d9b0}
.reading-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.reading-wrap .toc ul{list-style:none;padding:0;margin:0 0 8px;font-size:13.5px}.reading-wrap .toc a{text-decoration:none;display:block;padding:3px 6px;border-radius:6px}
.reading-wrap .toc a.on{background:var(--petrol-l);font-weight:700}.reading-wrap .toc a.done{color:var(--leaf-t)}
.keypoints{border-left:5px solid var(--mc)!important;background:linear-gradient(180deg,var(--mc-bg),#fff 70%)}
.lessondone{display:flex;gap:12px;align-items:center;margin:8px 0 24px}
@media (max-width:1100px){.methods,.lpaths{grid-template-columns:1fr}.mhero{grid-template-columns:1fr}.ichero{grid-template-columns:1fr}
  .phstrip{grid-template-columns:repeat(4,minmax(0,1fr))}.modes{grid-template-columns:1fr}.reading-wrap{grid-template-columns:1fr}.reading-wrap .toc{position:static;max-height:none}}
@media (max-width:640px){.phhead{grid-template-columns:48px 1fr}.phnum{width:48px;height:48px;font-size:22px}.phnav{grid-column:1/-1}
  .phstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.module header{grid-template-columns:36px 1fr}.ctxpick select{min-width:0;width:100%}}
.sidelist a.row{text-decoration:none;color:var(--ink)}.sidelist a.row:hover{background:var(--mist)}
ul.subtasks{list-style:none;padding:0;margin:0 0 10px}
ul.subtasks li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--rule-s)}
ul.subtasks li.done .stt{text-decoration:line-through;color:var(--soft)}
button.tick{width:24px;height:24px;padding:0;justify-content:center;border-radius:6px;background:#fff;border:2px solid #9DBDC3;color:var(--leaf-t);font-weight:700}
li.done button.tick{background:var(--leaf-bg);border-color:var(--leaf)}
.bulkbar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:10px 14px;margin:0 0 12px;background:#fff;border:1px solid var(--rule-s);border-radius:var(--r-m)}
.bulkbar label{display:flex;flex-direction:column;font-size:12.5px;color:var(--soft)}
.gantt svg{display:block;font-family:inherit}
.g-grid{stroke:#e3eaef;stroke-width:1}.g-month{font-size:11px;fill:#61757C}.g-lbl{font-size:12px;fill:#12303A}
.g-bar{fill:#9DBDC3}.g-bar.ph0{fill:#9db7c9}.g-bar.ph1{fill:#93b8d8}.g-bar.ph2{fill:#a99bd1}.g-bar.ph3{fill:#86b9b2}.g-bar.ph4{fill:#d7b28a}.g-bar.ph5{fill:#d99aa2}.g-bar.ph6{fill:#93c7a6}
.g-done{fill:#0E4B5A;opacity:.75}.g-block{fill:#D2553F}.g-ms{stroke:#E8A23A;stroke-dasharray:4 3}.g-msd{fill:#E8A23A}.g-today{stroke:#D2553F;stroke-width:2}

/* S2: simulation banner (existing amber tokens) */
.simbanner{background:var(--amber-bg);color:var(--amber-t);border:1px solid var(--amber);border-radius:var(--r-s);padding:.5rem .8rem;margin:0 0 1rem;font-size:.92rem}
.modepick{border:1px solid var(--rule);border-radius:var(--r-m);padding:.6rem .9rem;margin:0 0 1rem}
.modepick label{display:block;margin:.25rem 0}