/* look.css: Plumb 2026-10-23 refresh on the Fence Company (corner post) system.
   Loads last. Only visual: no layout logic, no data. To roll back, remove the
   look.css and look.js lines from index.html. */

@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Archivo';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2')}@font-face{font-family:'Archivo';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format('woff2')}@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2')}@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}
:root{
  --navy:#0c233f;--navy-deep:#0c1b2e;--navy-2:#16304f;--blue:#82b5e2;--blue-ink:#2f6eaa;
  --red:#e81d2d;--red-ink:#c4121f;--steel:#2f6eaa;
  --ink:#0c1b2e;--muted:#3f4e61;--subtle:#66768a;
  --bg:#f4f6f9;--raised:#fff;--sunken:#e6ebf1;--line:#d2dae4;--line-soft:#e6ebf1;
  --green:#17663f;--green-soft:#e2f1e8;--amber:#7a4d00;--amber-soft:#fdefd2;--danger:#a51b1b;--danger-soft:#fbe4e4;--info-soft:#dcebf8;
  --sh1:0 1px 2px rgba(12,35,63,.06),0 1px 1px rgba(12,35,63,.04);
  --sh2:0 6px 16px rgba(12,35,63,.10),0 2px 4px rgba(12,35,63,.06);
  --sh3:0 22px 48px rgba(12,35,63,.18),0 6px 12px rgba(12,35,63,.08);
  --head:'Bricolage Grotesque','Archivo',system-ui,sans-serif;--text:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-md:8px;--r-lg:12px;
}
body{font:14px/1.45 var(--text);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:#82b5e266}
.btn,th,input,select,textarea,.chip,.seg button{font-family:var(--text)}
:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
aside :focus-visible{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--blue)}

/* ---------- sidebar ---------- */
aside{background:var(--navy);padding:16px 12px 14px;scrollbar-width:thin;scrollbar-color:#2a4466 transparent}
aside::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,var(--navy-deep));pointer-events:none;opacity:.6}
aside .wordmark{display:block;padding:6px 10px 2px;text-decoration:none;color:#f4f6f9}
aside .wordmark .pm{display:inline-flex;align-items:flex-start;font:800 30px/1 var(--head);letter-spacing:-.04em;color:#f4f6f9}
aside .wordmark .pm .pm-l{display:inline-block;font-size:inherit;color:inherit;position:relative;width:.12em;height:.5em;margin:.06em .06em 0 .04em;background:#f4f6f9;transform-origin:50% 0;animation:pmswing 2.6s cubic-bezier(.3,.1,.3,1) .2s 1 both}
.pm-l::after{content:"";position:absolute;left:50%;top:100%;width:.3em;height:.36em;margin-left:-.15em;background:var(--red);clip-path:polygon(22% 0,78% 0,100% 40%,50% 100%,0 40%)}
.wordmark:hover .pm-l{animation:pmswing2 2.2s cubic-bezier(.3,.1,.3,1) 1 both}
@keyframes pmswing{0%{transform:rotate(18deg)}16%{transform:rotate(-11deg)}32%{transform:rotate(6deg)}48%{transform:rotate(-3deg)}64%{transform:rotate(1.4deg)}80%{transform:rotate(-.5deg)}100%{transform:rotate(0)}}
@keyframes pmswing2{0%{transform:rotate(0)}12%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}48%{transform:rotate(4deg)}66%{transform:rotate(-1.6deg)}84%{transform:rotate(.5deg)}100%{transform:rotate(0)}}
aside .wordmark>span{display:block;margin-top:12px;font:500 11px/1 var(--text);letter-spacing:.01em;text-transform:none;color:#7f94b0;white-space:nowrap}
.brand{background:none!important;padding:14px 10px 4px!important;border-radius:0}
.brand img{height:auto!important;width:100%;max-width:172px;object-fit:contain;object-position:left}
.brand .lockup{background:none!important;padding:0!important;color:#f4f6f9!important;display:flex!important;align-items:center;gap:10px}
.brand .lockup::before{content:"";flex:none;width:36px;height:36px;background:url(mark-on-navy.svg) center/contain no-repeat}
.brand .lockup small{font:800 15px/1 var(--head)!important;letter-spacing:-.01em!important;color:#f4f6f9;text-transform:none}
.brand .lockup b{font:700 11px/1.2 var(--text)!important;letter-spacing:.14em!important;color:var(--blue)!important;margin-top:3px}
.coswitch{margin:10px 0 12px}.coswitch label{font:700 9.5px var(--text);letter-spacing:.14em;color:#7f94b0;margin:0 10px 5px}
.coswitch select{width:calc(100% - 20px);margin:0 10px;background:var(--navy-2);border:1px solid #2a4466;border-radius:8px;color:#e6ecf3;padding:7px 9px;font-size:13px}
.searchbtn{margin:10px 0 4px;padding:9px 11px;border:1px solid #2a4466;border-radius:8px;background:var(--navy-2);color:#b9c6d6;font-size:13.5px;transition:background .15s,border-color .15s}
.searchbtn:hover{background:#1c3a5e;border-color:#3b5a80;color:#fff}
.searchbtn kbd{border-color:#3b5a80;color:#8ea3bf;background:var(--navy)}
nav{margin-top:8px}
.navgroup{font:700 9.5px var(--text)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#6f86a5!important;margin:20px 12px 6px!important}
nav a{position:relative;padding:8px 12px 8px 14px;margin-bottom:1px;border-radius:8px;font:500 14px/1.25 var(--text);color:#b9c6d6;transition:background .15s,color .15s}
nav a:hover{background:#15304f;color:#fff}
nav a.active,nav a.active:hover{background:#f4f6f9;color:var(--navy);font-weight:700;box-shadow:0 1px 0 #0003}
nav a.active::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:14px;margin-top:-7px;background:var(--red);clip-path:polygon(0 1.5px,1.5px 0,calc(100% - 1.5px) 0,100% 1.5px,100% 100%,0 100%)}
nav .count{font:700 11px var(--text);background:#17345a;color:#b9d3ee;border-radius:999px;padding:2px 8px}
nav a.active .count{background:var(--info-soft);color:var(--navy)}
.sidefoot{border-top:1px solid #1c3656;position:relative;z-index:1}
.sidefoot .email{color:#b9c6d6}.sidefoot .role{display:block;font-size:11px;color:#7f94b0;margin:-4px 0 8px}
.sidefoot .btn{border-radius:8px;border-color:#2a4466;color:#dbe5f1}
.teamlink{color:#7f94b0}.build{color:#5f7898;font-size:11px;margin-top:4px}

/* ---------- page ---------- */
main{padding:30px 36px 64px}
.heading{margin-bottom:22px;gap:20px}
h1{font:800 32px/1.05 var(--head);letter-spacing:-.035em;color:var(--navy);margin:0 0 6px}
h2{font:700 19px/1.2 var(--head);letter-spacing:-.02em;color:var(--navy)}
h3{font:700 14.5px/1.25 var(--head);letter-spacing:-.01em;color:var(--navy)}
.heading p,p{color:var(--muted)}
.heading p{font-size:14.5px}
.lk-eyebrow{display:flex;align-items:center;gap:8px;font:700 11px/16px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 8px}
.lk-eyebrow .lk-pk{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.lk-eyebrow .lk-pk i{width:4px;height:9px;background:var(--navy);clip-path:polygon(0 1.5px,1.5px 0,calc(100% - 1.5px) 0,100% 1.5px,100% 100%,0 100%)}
.lk-eyebrow .lk-pk i:last-child{height:12px;background:var(--red)}
.eyebrow{color:var(--red-ink);letter-spacing:.14em;font:700 11px var(--text)}

/* ---------- surfaces ---------- */
.card,.flow,.lane,.mix{border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--sh1);background:var(--raised)}
.card{padding:22px 24px}
.stats{gap:0;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh1);overflow:hidden}
.stats>.stat{border:0;border-radius:0;box-shadow:none;background:none}.stats>.stat+.stat{border-left:1px solid var(--line-soft)}
.stat{padding:18px 22px 18px}
.stat small{font:600 12.5px var(--text);color:var(--muted)}
.stat strong{font:700 32px/1.1 var(--head)!important;letter-spacing:-.025em;color:var(--navy)}
.stat em{color:var(--subtle)}
a.card,a.stat,.toolcard,.jobtile,.flowcell{transition:box-shadow .18s,transform .18s,border-color .18s,background .18s}
a.card:hover,a.stat:hover,.toolcard:hover,.jobtile:hover{box-shadow:var(--sh2);transform:translateY(-1px);border-color:#b7c4d4}
.statusbar{border-radius:var(--r-md);background:var(--info-soft);color:var(--navy)}
.statusbar.feewarn{background:var(--danger-soft);color:var(--danger)}

/* overview flow strip: each stage is a picket */
.flow{gap:0;overflow:hidden}
.flowcell{min-height:150px;padding:16px 16px 14px}
.flowcell+.flowcell::before{display:none}.flowcell+.flowcell{border-left:1px solid var(--line-soft)}
.flowcell .fl{font:600 12.5px var(--text);color:var(--muted)}
.flowcell strong{font:700 34px/1.05 var(--head)!important;letter-spacing:-.03em;color:var(--navy)}
.flowcell em{color:var(--subtle)}
.flowcell .fb{position:absolute;right:12px;bottom:0;left:auto;margin:0;width:18px;height:92px;background:none;display:flex;align-items:flex-end}
.flowcell .fb i{display:block;width:100%;height:var(--h,0%);min-height:6px;background:linear-gradient(90deg,var(--navy) 50%,var(--navy-deep) 50%);clip-path:polygon(0 5px,4px 0,calc(100% - 4px) 0,100% 5px,100% 100%,0 100%);transform-origin:50% 100%;animation:pkrise .7s cubic-bezier(.2,.7,.2,1) both}
.flowcell:nth-child(2) .fb i{animation-delay:.04s}.flowcell:nth-child(3) .fb i{animation-delay:.08s}.flowcell:nth-child(4) .fb i{animation-delay:.12s}.flowcell:nth-child(5) .fb i{animation-delay:.16s}.flowcell:nth-child(6) .fb i{animation-delay:.2s}.flowcell:nth-child(7) .fb i{animation-delay:.24s}.flowcell:nth-child(8) .fb i{animation-delay:.28s}
.flowcell.lk-top .fb i{background:linear-gradient(90deg,var(--red) 50%,#b3121f 50%)}
.flowcell.zero .fb i{background:var(--sunken);height:6px!important}
.flowcell:hover{background:#f7f9fc}
@keyframes pkrise{from{transform:scaleY(.12)}to{transform:scaleY(1)}}

/* charts: bars become pickets */
.vbar .vt i{background:linear-gradient(90deg,#1d4a7a 50%,#173e68 50%)!important;clip-path:polygon(0 6px,5px 0,calc(100% - 5px) 0,100% 6px,100% 100%,0 100%);border-radius:0!important;transform-origin:50% 100%;animation:pkrise .7s cubic-bezier(.2,.7,.2,1) both}
.vbar.lk-top .vt i{background:linear-gradient(90deg,var(--red) 50%,#b3121f 50%)!important}
.vbar .vv{font:700 12px var(--head);color:var(--navy)}
.hbar .ht i,.mixbar i{background:var(--navy)}

/* ---------- controls ---------- */
.btn{border-radius:var(--r-md);border:1px solid var(--line);background:var(--raised);color:var(--navy);font:600 13.5px var(--text);padding:9px 15px;box-shadow:var(--sh1);transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2);border-color:#a9b8ca;background:#fff}
.btn:active{transform:none;box-shadow:var(--sh1)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.btn.primary:hover{background:#d61a29;border-color:#d61a29}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#f4f6f9}
.btn.dark:hover{background:#12304f}
input,select,textarea{border:1px solid #b9c5d3;border-radius:var(--r-md);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--subtle)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px #82b5e255}
.seg{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh1);padding:3px;gap:2px;background:#fff}
.seg button{border:0!important;border-radius:6px;padding:7px 13px;font:600 13px var(--text);color:var(--muted)}
.seg button.on{background:var(--navy);color:#fff}
.tabs{border-bottom:1px solid var(--line)}
.tabs button{font:600 14px var(--text);color:var(--muted)}
.tabs button.selected{color:var(--navy);border-bottom:3px solid var(--red);font-weight:700}
.chip{border-radius:999px;border-color:var(--line);background:#fff;color:var(--navy);box-shadow:var(--sh1)}
.link{color:var(--blue-ink);font-weight:600}

/* ---------- tables ---------- */
.card.tablewrap{padding:4px 0 8px;overflow:auto}
.card.tablewrap table{min-width:100%}
th{font:700 11px var(--text)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important;background:#f7f9fb!important;border-bottom:1px solid var(--line)!important;padding:11px 12px!important}
.card.tablewrap th:first-child,.card.tablewrap td:first-child{padding-left:22px!important}
.card.tablewrap th:last-child,.card.tablewrap td:last-child{padding-right:22px!important}
td{padding:13px 12px;border-bottom:1px solid var(--line-soft)}
tbody tr{transition:background .12s}
tbody tr:hover td{background:#f5f8fc}
td b,td a b{color:var(--navy);font-weight:700}
td small{color:var(--subtle)}

/* ---------- status and badges ---------- */
.st{gap:6px;padding:3px 9px 3px 8px;border-radius:6px;background:var(--sunken);color:var(--muted);font:600 12.5px var(--text)}
.st i{width:7px;height:7px}
.st.green{background:var(--green-soft);color:var(--green)}.st.green i{background:var(--green)}
.st.amber{background:var(--amber-soft);color:var(--amber)}.st.amber i{background:#c98a1a}
.st.blue{background:var(--info-soft);color:var(--navy)}.st.blue i{background:var(--navy)}
.st.red{background:var(--danger-soft);color:var(--danger)}.st.red i{background:var(--danger)}
.pill{border-radius:6px;font:700 11.5px var(--text);padding:3px 8px;background:var(--sunken);color:var(--muted)}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.red{background:var(--danger-soft);color:var(--danger)}

/* ---------- board ---------- */
.lane{background:#eaeef4;border-color:var(--line);box-shadow:none}
.lane h3{font:700 13.5px var(--head)}
.jobtile{border-radius:10px;border-color:var(--line);box-shadow:var(--sh1)}

/* ---------- dialogs, toast, loading ---------- */
dialog{border:0;border-radius:14px;box-shadow:var(--sh3);padding:28px}
dialog::backdrop{background:rgba(12,27,46,.55);backdrop-filter:blur(2px)}
dialog[open]{animation:lkpop .18s cubic-bezier(.2,.8,.2,1)}
@keyframes lkpop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
#toast{background:var(--navy);border-radius:10px;box-shadow:var(--sh3);padding:13px 18px 13px 34px;font-weight:600;font-size:14px}
#toast::before{content:"";position:absolute;left:16px;top:50%;margin-top:-8px;width:6px;height:16px;background:var(--red);clip-path:polygon(0 2px,2px 0,calc(100% - 2px) 0,100% 2px,100% 100%,0 100%)}
.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:70px 20px;color:var(--subtle);font-size:13px}
.loading::before{content:"";width:46px;height:22px;background:
 linear-gradient(var(--navy),var(--navy)) 0 100%/6px 60% no-repeat,
 linear-gradient(var(--navy),var(--navy)) 10px 100%/6px 60% no-repeat,
 linear-gradient(var(--red),var(--red)) 20px 100%/6px 100% no-repeat,
 linear-gradient(var(--navy),var(--navy)) 30px 100%/6px 60% no-repeat,
 linear-gradient(var(--navy),var(--navy)) 40px 100%/6px 60% no-repeat;animation:lkload 1s ease-in-out infinite alternate}
@keyframes lkload{from{opacity:.35}to{opacity:1}}
.empty{color:var(--subtle)}

/* sign in */
body.signedout{background:var(--navy)}
body.signedout .signin .card{border:0;box-shadow:var(--sh3);border-radius:14px;padding:34px}
body.signedout .signin h2{font:800 26px var(--head);letter-spacing:-.03em}

@media(prefers-reduced-motion:reduce){.pm-l,.flowcell .fb i,.vbar .vt i,dialog[open],.loading::before{animation:none!important}.btn:hover,a.card:hover,.jobtile:hover{transform:none}}

/* ---------- phones ---------- */
@media(max-width:650px){
  aside{padding:12px 14px 0;gap:6px 10px}
  aside::after{display:none}
  aside .wordmark{display:block!important;padding:0;order:0}
  aside .wordmark .pm{font-size:24px}
  aside .wordmark>span{display:none}
  .brand{order:1;width:auto!important;padding:0!important;margin-left:auto}
  .brand img{max-width:120px;height:22px!important}
  .coswitch{order:2;width:100%;margin:2px 0 0}.coswitch label{display:none}.coswitch select{margin:0;width:100%}
  .searchbtn{order:3;flex:1;margin:0}
  .sidefoot{order:4;margin:0!important}.sidefoot .role,.sidefoot .build,.sidefoot #datastamp{display:none}
  nav{order:5;margin:4px -14px 0!important;padding:6px 10px 10px;width:calc(100% + 28px)!important;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{padding:7px 12px;border-radius:999px}
  nav a.active::before{display:none}
  main{padding:20px 16px 48px}
  h1{font-size:27px}
  .flowcell{min-height:118px}
  .flowcell .fb{height:64px;width:14px}
  .card{padding:18px}
}
.hub-over{border-left:4px solid var(--green)!important}

/* job card stage meter: the Picket Line (one picket per stage, current one red) */
.steps2{gap:6px;margin:22px 0 6px;align-items:start}
.steps2 li{padding-top:48px;color:var(--subtle);font:500 13px/1.3 var(--text)}
.steps2 li::before{display:block;content:"";position:absolute;top:40px;left:0;right:-6px;height:2px;background:var(--line)}.steps2 li:last-child::before{right:0}.steps2 li.done::before{background:var(--navy)}
.steps2 li i,.steps2 li.now i,.steps2 li.done i{position:absolute;top:auto;bottom:auto;left:0;right:auto;width:16px;height:26px;top:14px;z-index:1;border:0!important;border-radius:0;background:linear-gradient(90deg,var(--sunken) 50%,#d9e0e8 50%);clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%);transform-origin:50% 100%;animation:pkrise .6s cubic-bezier(.2,.7,.2,1) both}
.steps2 li.done i{background:linear-gradient(90deg,var(--navy) 50%,var(--navy-deep) 50%)}
.steps2 li.now i{top:0;height:40px;background:linear-gradient(90deg,var(--red) 50%,#b3121f 50%)}
.steps2 li:nth-child(2) i{animation-delay:.05s}.steps2 li:nth-child(3) i{animation-delay:.1s}.steps2 li:nth-child(4) i{animation-delay:.15s}.steps2 li:nth-child(5) i{animation-delay:.2s}.steps2 li:nth-child(6) i{animation-delay:.25s}.steps2 li:nth-child(7) i{animation-delay:.3s}
.steps2 li.done{color:var(--ink)}
.steps2 li.now{color:var(--navy);font-weight:700}
.steps2 li small{color:var(--muted)}
@media(prefers-reduced-motion:reduce){.steps2 li i{animation:none!important}}
@media(max-width:650px){.steps2{gap:4px}.steps2 li{font-size:11.5px}}