/* Lodestar design tokens and components — derived from the concept prototype (docs/design/prototype). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}

body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#17191E;background:#F3F2EE;-webkit-font-smoothing:antialiased}
a{color:#0B5F60;text-decoration:none}a:hover{color:#073F40}
*{box-sizing:border-box}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{min-height:100vh;display:flex;background:#F3F2EE}
.side{width:232px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;background:#14171C;color:#C3C8CF;display:flex;flex-direction:column;padding:18px 12px;gap:2px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 22px;color:#FFFFFF;font-family:Archivo,'IBM Plex Sans',sans-serif;font-weight:800;font-size:19px;letter-spacing:.01em}
.brand small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:10px;letter-spacing:.12em;color:#8C939C;text-transform:uppercase}
.navh{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7D848D;padding:14px 12px 6px}
.nav{display:flex;align-items:center;gap:11px;padding:0 12px;border-radius:8px;color:#C3C8CF;font-size:14px;min-height:42px}
.nav:hover{background:#20252C;color:#FFFFFF}
.nav.on{background:#262C35;color:#FFFFFF;box-shadow:inset 0 0 0 1px #343B45}
.nav .ct{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;background:#B8322A;color:#FFFFFF;border-radius:10px;padding:1px 7px}
.nav.locked{color:#666D76}
.nav.locked:hover{background:transparent;color:#666D76}
.who{margin-top:auto;border-top:1px solid #262C35;padding:14px 8px 4px;display:flex;flex-direction:column;gap:10px}
.av{width:36px;height:36px;border-radius:50%;background:#0B5F60;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-family:Archivo,sans-serif;font-weight:700;font-size:13px;flex-shrink:0}
.who .nm{color:#FFFFFF;font-size:13px;font-weight:600}
.who .rl{color:#9AA1AA;font-size:12px}
.switch{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:8px;border:1px solid #343B45;color:#DDE1E6;font-size:13px}
.switch:hover{background:#20252C;color:#FFFFFF}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{height:64px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:0 28px;border-bottom:1px solid #DCD9D1;background:#FBFAF7}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#5B6169}
.crumb a{color:#3D434B}
.crumb a:hover{color:#0B5F60}
.crumb b{color:#17191E;font-weight:600}
.srch{margin-left:auto;display:flex;align-items:center;gap:8px;height:38px;width:280px;border:1px solid #D6D3CA;border-radius:8px;background:#FFFFFF;padding:0 12px;color:#6B7178}
.srch input{border:0;outline:0;font:inherit;font-size:13px;flex:1;background:transparent;color:#17191E}
.live{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#22643F;background:#E5F2EA;border-radius:20px;padding:6px 12px}
.live i{width:7px;height:7px;border-radius:50%;background:#2F8A57;display:block;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.ib{width:40px;height:40px;border-radius:8px;border:1px solid #D6D3CA;background:#FFFFFF;display:flex;align-items:center;justify-content:center;color:#30353C;position:relative;cursor:pointer}
.ib .bdg{position:absolute;top:-5px;right:-5px;background:#B8322A;color:#FFFFFF;font-family:'IBM Plex Mono',monospace;font-size:10px;border-radius:9px;padding:1px 5px}
.content{flex:1;min-height:0;padding:22px 28px 40px;display:flex;flex-direction:column;gap:18px;max-width:1600px;width:100%}
.h1{font-family:Archivo,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.01em;margin:0;color:#14171C}
.h2{font-family:Archivo,sans-serif;font-weight:700;font-size:16px;margin:0;color:#14171C}
.sub{font-size:13px;color:#5B6169}
.mono{font-family:'IBM Plex Mono',monospace}
.card{background:#FFFFFF;border:1px solid #E0DDD5;border-radius:12px}
.ch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #ECE9E2}
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5B6169}
.kv{font-family:Archivo,sans-serif;font-weight:700;font-size:32px;line-height:1;color:#14171C}
.kv.crit{color:#A4281F}.kv.warn{color:#8A5A0B}
.ks{font-size:12px;color:#5B6169}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:20px;padding:3px 10px 3px 8px;white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;display:block}
.pill.crit{background:#FBE7E4;color:#A4281F}.pill.crit .dot{background:#C4332A}
.pill.warn{background:#FAEFD8;color:#7E5208}.pill.warn .dot{background:#D08A12}
.pill.ok{background:#E3F1E8;color:#22643F}.pill.ok .dot{background:#2F8A57}
.pill.off{background:#ECEBE7;color:#4D535B}.pill.off .dot{background:#848A93}
.pill.info{background:#E5EDF8;color:#1F4E8C}.pill.info .dot{background:#3A6FC4}
.sd{width:12px;height:12px;border-radius:50%;display:inline-block}
.sd.crit{background:#C4332A;box-shadow:0 0 0 3px #F6D3CE}.sd.warn{background:#D08A12}.sd.ok{background:#2F8A57}.sd.off{background:#9AA0A8}.sd.info{background:#3A6FC4}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:12px;border-radius:6px;padding:3px 8px;min-width:34px;justify-content:center}
.chip.crit{background:#FBE7E4;color:#A4281F}.chip.warn{background:#FAEFD8;color:#7E5208}.chip.ok{background:#EFF5F1;color:#22643F}.chip.off{background:#ECEBE7;color:#4D535B}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5B6169;text-align:left;padding:10px 12px;border-bottom:1px solid #E6E3DB;background:#FAF9F6}
.tbl td{padding:0 12px;height:52px;border-bottom:1px solid #EFEDE7;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.c,.tbl th.c{text-align:center}
.tbl.tight th{padding:10px 7px}.tbl.tight td{padding:0 7px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid #D6D3CA;background:#FFFFFF;color:#17191E}
.btn:hover{background:#F6F5F1;color:#17191E}
.btn.pri{background:#0B5F60;border-color:#0B5F60;color:#FFFFFF}
.btn.pri:hover{background:#094B4C;color:#FFFFFF}
.btn.dark{background:#14171C;border-color:#14171C;color:#FFFFFF}
.btn.dark:hover{background:#262C35;color:#FFFFFF}
.seg{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:7px;background:transparent;font:inherit;font-size:13px;color:#4D535B;cursor:pointer}
.seg.on{background:#FFFFFF;color:#14171C;font-weight:600;box-shadow:0 1px 2px rgba(20,23,28,.14)}
.segs{display:inline-flex;gap:2px;padding:3px;background:#E9E7E1;border-radius:9px}
.lnk{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.bar{height:8px;border-radius:4px;background:#EFEDE7;overflow:hidden;display:flex}
.bar i{display:block;height:100%}

.lt{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border-radius:8px;border:1px solid #D6D3CA;background:#F6F5F1;font:inherit;font-size:12.5px;color:#7A8088;cursor:pointer;text-decoration:line-through}
.lt.on{background:#FFFFFF;color:#17191E;text-decoration:none;border-color:#BDB9AE}
.plan{position:relative;width:100%;border-radius:8px;overflow:hidden;background:#FFFFFF}
.plan-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;pointer-events:none}
.mk{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mk .g{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFFFFF;border:2px solid #FFFFFF;box-shadow:0 1px 4px rgba(20,23,28,.35);transition:transform .15s}
.mk.ok .g{background:#2F8A57}.mk.warn .g{background:#B87606}.mk.crit .g{background:#C4332A;animation:pulse 1.6s infinite}.mk.off .g{background:#6F757D}.mk.info .g{background:#3A6FC4}
.mk.sel .g{outline:3px solid #14171C;outline-offset:2px}
.mk:hover .g{transform:scale(1.12)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(196,51,42,.6)}70%{box-shadow:0 0 0 14px rgba(196,51,42,0)}100%{box-shadow:0 0 0 0 rgba(196,51,42,0)}}
.fi{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid #F0EEE8}
.fi dt{color:#5B6169;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
.fi dd{margin:0;color:#17191E}

/* ---- Build 0 layout utilities (replace inline styles from the prototype) ---- */
:focus-visible{outline:3px solid #0B5F60;outline-offset:2px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:4px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.grid{display:grid;gap:14px}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-wide{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:16px;align-items:start}
.split-side{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.split-side.wide{grid-template-columns:minmax(0,1fr) 380px}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.pad{padding:16px 18px}
.list{list-style:none;margin:0;padding:0}
.list-row{display:grid;grid-template-columns:16px 1fr auto;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid #EFEDE7}
.list-row:last-child{border-bottom:0}
.muted{font-size:12.5px;color:#4D535B}
.small{font-size:12px;color:#5B6169}
.strong{font-weight:600}
.hbar{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:12px;font-size:13px}
.hbar .bar{height:12px}
.hbar i{background:#0B5F60}
.tone-neutral{background:#9AA0A8}.tone-info{background:#3A6FC4}.tone-accent{background:#0B5F60}.tone-warn{background:#D08A12}.tone-ok{background:#2F8A57}
.swatch{width:10px;height:10px;border-radius:3px;display:block}
.callout{padding:10px 12px;border-radius:8px;font-size:12.5px}
.callout.warn{background:#FAEFD8;color:#7E5208}
.callout.accent{background:#F0F6F5;color:#0B4A4B}
.code{margin:0;font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.55;background:#14171C;color:#D7DBE0;border-radius:8px;padding:10px 12px;white-space:pre-wrap;overflow-x:auto}
.tile{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.tile-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#30353C}
.icon-box{width:36px;height:36px;border-radius:8px;background:#F0F6F5;color:#0B5F60;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-box.dark{background:#14171C;color:#FFFFFF}
.card.dashed{border-style:dashed;background:#FAF9F6}
.pipeline{display:flex;align-items:stretch;gap:8px}
.stage{flex:1;min-width:0;background:#FFFFFF;border:1px solid #E0DDD5;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.stage-arrow{align-self:center;color:#8C939C;flex-shrink:0}
.cell-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#0B4A4B;background:#EAF3F2;border-radius:5px;padding:3px 8px}
.cell-none{color:#B0B4BA}
.scope-chip{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#0B5F60;background:#E4EFEE;border-radius:6px;padding:7px 10px}
.live.stale{color:#7E5208;background:#FAEFD8}
.live.stale i{background:#D08A12;animation:none}
.chart{width:100%;height:auto;display:block}
.table-wrap{overflow-x:auto}
.empty{padding:40px;text-align:center;color:#4D535B}
.not-found{max-width:560px;margin:60px auto;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}

/* ---- Persona picker ---- */
.picker{min-height:100vh;display:flex;flex-direction:column;background:#F3F2EE}
.picker-bar{height:72px;display:flex;align-items:center;gap:12px;padding:0 56px;background:#14171C;color:#FFFFFF}
.picker-main{flex:1;padding:44px 56px 40px;display:flex;flex-direction:column;gap:30px;max-width:1500px;width:100%;margin:0 auto}
.picker-title{margin:0;font-family:Archivo,sans-serif;font-weight:800;font-size:46px;line-height:1.04;letter-spacing:-.02em;max-width:820px}
.persona{padding:22px;display:flex;flex-direction:column;gap:14px}
.persona ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:#30353C}
.persona li{display:flex;gap:8px;align-items:flex-start}
.level{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:#FFFFFF;border:1px solid #E0DDD5;border-radius:10px}

/* ---- Engineer (mobile) ---- */
.mobile{max-width:480px;margin:0 auto;min-height:100vh;background:#F3F2EE;display:flex;flex-direction:column}
.mobile-bar{background:#14171C;color:#FFFFFF;padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}
.mobile-main{flex:1;padding:14px;display:flex;flex-direction:column;gap:12px}
.job{padding:16px;display:flex;flex-direction:column;gap:12px}
.job.crit{border-color:#E9B8B1}
.reading{display:flex;align-items:flex-end;justify-content:space-between;background:#FBE7E4;border-radius:10px;padding:12px 14px}
.stepper{display:flex;gap:4px}
.step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;font-size:10.5px;color:#6B7178}
.step i{width:20px;height:20px;border-radius:50%;border:2px solid #C9C5BB;background:#FFFFFF;display:flex;align-items:center;justify-content:center;color:#FFFFFF}
.step.done i{background:#0B5F60;border-color:#0B5F60}
.step.now i{border-color:#0B5F60}
.step.now,.step.done{color:#14171C}
.step.now{font-weight:600}
.check{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid #F0EEE8;font-size:13.5px}
.check input{width:20px;height:20px;accent-color:#0B5F60}

@media (max-width:1100px){
  .split-wide,.split-side,.split-side.wide{grid-template-columns:minmax(0,1fr)}
  .cols-5,.cols-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .mk.crit .g,.live i{animation:none}
}
button.switch{background:transparent;font:inherit;cursor:pointer;width:100%}
button.switch:hover{background:#1F242C}
.picker .switch{color:#FFFFFF;width:auto;padding:0 14px}