/* Archie Builder page: the Fulcrum chrome (dark nav rail + Archie header) shared by every demo panel, then six distinct sample apps. Built to be glanced at, not read. */
.ab-root .panel{display:grid!important;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
.ab-root .panel>.fu-rail{grid-column:1;grid-row:1/-1}
.ab-root .panel>.panel-top,.ab-root .panel>.crumb,.ab-root .panel>.body,.ab-root .panel>.xf-body{grid-column:2;min-width:0}
.ab-root .fu-rail{background:#15161c;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;width:48px;flex:0 0 48px}
.ab-root .fu-rail .fu-logo{width:22px;height:22px;margin-bottom:12px}
.ab-root .fu-rail i{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#aab0bd}
.ab-root .fu-rail i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-root .fu-rail i.on{background:#2a2c36;color:#fff}
.ab-root .fu-rail .fu-av{margin-top:auto;width:28px;height:28px;border-radius:50%;background:#ff8a1d;color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
@media (max-width:767px){.ab-root .panel{grid-template-columns:minmax(0,1fr)}.ab-root .panel>.fu-rail{display:none}.ab-root .panel>.panel-top,.ab-root .panel>.crumb,.ab-root .panel>.body,.ab-root .panel>.xf-body{grid-column:1}}
.ab-root .app{display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif;color:#1b1f3b;font-size:13px;line-height:1.35}
.ab-root .app>div:first-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ab-root .app .app-foot{margin-top:10px}
.ab-root .app small{font-size:11px;color:#5e6066;font-weight:400}
.ab-root .app .done-bar{margin-top:8px}
.ab-root .pulse{animation:pulse 1.1s ease-in-out infinite}

/* SALES: ring + bars, blue */
.ab-root .app>div.sa{display:grid;grid-template-columns:190px 1fr;grid-template-rows:1fr auto;gap:16px;align-items:stretch}
.ab-root .sa>.app-foot{grid-column:1/-1}
.ab-root .sa-ring{background:#fff;border-radius:14px;display:grid;justify-items:center;align-content:center;gap:6px;padding:14px 10px;position:relative}
.ab-root .sa-ring svg{display:block}
.ab-root .sa-arc{transition:stroke-dashoffset 1s ease}
.ab-root .sa-ring-t{position:absolute;top:58px;left:0;right:0;text-align:center}
.ab-root .sa-ring-t b{display:block;font-size:34px;font-weight:700;line-height:1;color:#1b1f3b;font-family:Gilroy,Inter,sans-serif}
.ab-root .sa-ring-t b em{font-style:normal;font-size:18px;color:#5e6066}
.ab-root .sa-ring-k{display:flex;gap:12px;font-size:11px;color:#5e6066;margin-top:4px}
.ab-root .sa-ring-k b{color:#1b1f3b}
.ab-root .sa-bars{background:#fff;border-radius:14px;padding:16px 18px;display:grid;gap:12px;align-content:start;position:relative;overflow:hidden}
.ab-root .sa-row{display:grid;gap:5px}
.ab-root .sa-l{display:flex;justify-content:space-between;align-items:baseline}
.ab-root .sa-l span{font-weight:500;font-size:13px}
.ab-root .sa-l b{font-size:16px;font-weight:700}
.ab-root .sa-track{height:16px;border-radius:8px;background:#e8effd;overflow:hidden}
.ab-root .sa-track i{display:block;height:100%;background:#1d63ed;border-radius:8px;transition:background .3s}
.ab-root .sa-row.on .sa-track i{background:#ff8a1d}
.ab-root .sa-row.on .sa-l b{color:#9a4a00}
.ab-root .sa-drill{position:absolute;left:0;right:0;bottom:0;background:#fff7ed;border-top:3px solid #ff8a1d;padding:12px 18px;display:grid;gap:8px;transform:translateY(105%);transition:transform .4s ease}
.ab-root .sa.drill .sa-drill{transform:none}
.ab-root .sa-drill-h{display:flex;justify-content:space-between;align-items:baseline}
.ab-root .sa-drill-h b{font-size:14px;font-weight:600}.ab-root .sa-drill-h span{font-size:12px;color:#9a4a00;font-weight:600}
.ab-root .sa-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ab-root .sa-tiles div{background:#fff;border-radius:10px;padding:8px 10px;display:grid;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.ab-root .sa-tiles div.in{opacity:1;transform:none}
.ab-root .sa-tiles b{font-size:24px;font-weight:700;line-height:1;font-family:Gilroy,Inter,sans-serif}

/* ENGINEERING: photo-led setup sheet, slate */
.ab-root .app>div.en{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto;gap:14px}
.ab-root .en>.app-foot{grid-column:1/-1}
.ab-root .en-photo{position:relative;border-radius:14px;background:linear-gradient(135deg,#dfe4ee,#f3f5f9 55%,#cfd6e3);display:grid;place-items:center;overflow:hidden;min-height:0}
.ab-root .en-photo svg{width:68%;max-height:70%}
.ab-root .en-tag{position:absolute;left:12px;top:12px;background:#fff;border-radius:8px;padding:6px 10px;display:grid;gap:1px;box-shadow:0 2px 8px rgba(41,41,50,.1)}
.ab-root .en-tag b{font-weight:600}.ab-root .en-tag span{font-size:11px;color:#5e6066}
.ab-root .en-thumbs{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;align-items:center}
.ab-root .en-thumbs i{width:34px;height:26px;border-radius:5px;background:linear-gradient(135deg,#aab3c6,#d5dbe6);border:2px solid #fff;box-shadow:0 1px 4px rgba(41,41,50,.15)}
.ab-root .en-thumbs b{font-size:11px;font-weight:600;color:#3d414a;margin-left:4px}
.ab-root .en-ops{position:relative;background:#fff;border-radius:14px;padding:14px;display:grid;gap:10px;align-content:start;overflow:hidden}
.ab-root .en-op{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center}
.ab-root .en-op>b{width:38px;height:38px;border-radius:10px;background:#292932;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.ab-root .en-op strong{display:block;font-weight:600;font-size:13px}
.ab-root .en-op span{font-size:11.5px;color:#5e6066;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ab-root .en-pages{position:absolute;inset:0;background:rgba(255,255,255,.96);display:none;align-items:center;justify-content:center;gap:10px}
.ab-root .en.print .en-pages{display:flex}
.ab-root .en-page{width:54px;height:72px;background:#fff;border:1px solid #d4d4d6;border-radius:3px;box-shadow:0 4px 14px rgba(41,41,50,.12);opacity:0;transform:translateY(10px) rotate(-3deg);transition:opacity .3s,transform .3s;background-image:repeating-linear-gradient(#eaeaeb 0 2px,transparent 2px 8px);background-size:34px 100%;background-repeat:no-repeat;background-position:10px 14px}
.ab-root .en-page.in{opacity:1;transform:none}
.ab-root .en-pages span{font-weight:600;color:#1b1f3b;margin-left:6px;opacity:0;transition:opacity .3s}
.ab-root .en-pages.ready span{opacity:1}

/* PURCHASING: calendar timeline, orange/red */
.ab-root .po{display:flex;flex-direction:column;gap:8px}
.ab-root .po-cal{display:grid;grid-template-columns:150px repeat(10,1fr);gap:0;font-size:11px;color:#5e6066;text-transform:uppercase;letter-spacing:.04em;padding:0 12px}
.ab-root .po-cal span{text-align:center;padding:4px 0;border-left:1px solid #e2e2e6}
.ab-root .po-cal span.today{color:#ff3d00;font-weight:700;border-left:2px solid #ff3d00}
.ab-root .po-cal-v{border:0!important}
.ab-root .po-rows{background:#fff;border-radius:14px;padding:6px 12px;display:grid;align-content:start;flex:1}
.ab-root .po-row{display:grid;grid-template-columns:150px 1fr;align-items:center;min-height:44px;border-bottom:1px solid #eef0f3}
.ab-root .po-row:last-child{border-bottom:0}
.ab-root .po-v b{display:block;font-weight:600;font-size:13px}
.ab-root .po-tl{position:relative;height:30px;background:linear-gradient(to right,transparent calc(35% - 1px),#ff3d00 calc(35% - 1px),#ff3d00 calc(35% + 1px),transparent calc(35% + 1px))}
.ab-root .po-bar{position:absolute;top:6px;height:18px;border-radius:9px;background:#1d63ed;display:flex;align-items:center;justify-content:flex-end;padding:0 8px;transition:background .3s}
.ab-root .po-bar span{font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.ab-root .po-row.late .po-bar{background:#ff3d00}
.ab-root .po-row.flagged .po-bar{background:#008455}
.ab-root .po-foot{display:flex;gap:14px;font-size:12px;color:#5e6066;padding:2px 4px}
.ab-root .po-foot b{font-size:18px;font-weight:700;color:#b42318;margin-right:3px}
.ab-root .po-foot .po-ok b{color:#008455}
.ab-root .po-foot.ok .po-n b{color:#008455}

/* QUALITY: drawing with balloons + measurement tiles, green/red */
.ab-root .app>div.qc{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:14px}
.ab-root .qc>.app-foot{grid-column:1/-1}
.ab-root .qc-draw{position:relative;background:#fff;border-radius:14px;display:grid;place-items:center;padding:14px;background-image:linear-gradient(#f1f2f5 1px,transparent 1px),linear-gradient(90deg,#f1f2f5 1px,transparent 1px);background-size:16px 16px}
.ab-root .qc-draw svg{width:92%;max-height:80%}
.ab-root .qc-tag{position:absolute;left:12px;top:12px;background:#fff;border:1px solid #e2e2e6;border-radius:8px;padding:5px 10px;display:grid}
.ab-root .qc-tag b{font-weight:600}.ab-root .qc-tag span{font-size:11px;color:#5e6066}
.ab-root .qc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;position:relative}
.ab-root .qc-t{background:#fff;border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:center;border:2px solid transparent;transition:border-color .3s,background .3s}
.ab-root .qc-t i{grid-row:1/3;width:26px;height:26px;border-radius:50%;background:#1d63ed;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px}
.ab-root .qc-t small{font-size:11px;color:#5e6066}.ab-root .qc-t small em{font-style:normal;color:#9fa1a8}
.ab-root .qc-t b.qc-val{font-size:20px;font-weight:700;line-height:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#1b1f3b}
.ab-root .qc-res{grid-column:2;font-size:11px;font-weight:600}
.ab-root .qc-t.ok{border-color:#3dc975;background:#f2fbf6}.ab-root .qc-t.ok .qc-res{color:#008455}.ab-root .qc-t.ok i{background:#008455}
.ab-root .qc-t.no{border-color:#ff3d00;background:#fff3ee}.ab-root .qc-t.no .qc-res{color:#b42318}.ab-root .qc-t.no i{background:#ff3d00}.ab-root .qc-t.no b{color:#b42318}
.ab-root .qc-ncr{grid-column:1/-1;display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:#ff3d00;color:#fff;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.ab-root .qc-ncr.in{opacity:1;transform:none}
.ab-root .qc-ncr b{font-weight:700}.ab-root .qc-ncr span{font-size:11.5px;opacity:.9}

/* PRODUCTION: department board with late badges */
.ab-root .pr{display:flex;flex-direction:column;gap:10px}
.ab-root .pr-top{display:flex;align-items:baseline;gap:10px}
.ab-root .pr-top b{font-size:15px;font-weight:600}.ab-root .pr-top .pr-n{font-style:normal;font-size:26px;font-weight:700;font-family:Gilroy,Inter,sans-serif;margin-right:2px}
.ab-root .pr-top span{color:#5e6066;font-size:12px}
.ab-root .pr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1;align-items:stretch}
.ab-root .pr-col{border-radius:14px;padding:10px;display:grid;gap:8px;align-content:start}
.ab-root .pr-col.mill{background:#e8effd}.ab-root .pr-col.weld{background:#ffeddd}.ab-root .pr-col.fin{background:#d9ede6}
.ab-root .pr-col-h{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 4px}
.ab-root .pr-col-h b{font-weight:700;font-size:14px}
.ab-root .pr-cnt{background:#fff;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
.ab-root .pr-card{background:#fff;border-radius:10px;padding:10px;display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;box-shadow:0 1px 3px rgba(41,41,50,.08);position:relative}
.ab-root .pr-late{width:40px;height:40px;border-radius:10px;background:#ff3d00;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;transition:background .3s}
.ab-root .pr-card b{display:block;font-weight:600}.ab-root .pr-card span{font-size:11px;color:#5e6066}
.ab-root .pr-new{grid-column:1/-1;font-style:normal;font-size:12px;font-weight:700;color:#008455;display:none}
.ab-root .pr-card.set .pr-late{background:#008455}
.ab-root .pr-card.set .pr-new{display:block}

/* EVERYONE: TV scoreboard, dark + lime */
.ab-root .app-everyone{background:#15161c;border-radius:12px;padding:16px;color:#fff}
.ab-root .tv{color:#fff;display:flex;flex-direction:column;gap:12px}
.ab-root .tv-top{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.ab-root .tv-top b{font-size:14px;font-weight:600;color:#fff}
.ab-root .tv-clock{font-size:11px;color:#aab0bd}.ab-root .tv-clock i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3dc975;margin-right:6px}
.ab-root .tv-big{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ab-root .tv-big>div{background:#22242c;border-radius:12px;padding:14px;display:grid;gap:4px;align-content:start;position:relative;overflow:hidden}
.ab-root .tv-big>div.hi{background:#e8ff5e}
.ab-root .tv-big>div.hi small,.ab-root .tv-big>div.hi b{color:#15161c}
.ab-root .tv-big small{color:#aab0bd;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.ab-root .tv-big b{font-size:46px;line-height:1;font-weight:700;color:#fff;font-family:Gilroy,Inter,sans-serif;transition:color .3s}
.ab-root .tv-big b em{font-style:normal;font-size:22px;color:#aab0bd}
.ab-root .tv-big b.tick{color:#e8ff5e}.ab-root .tv-big>div.hi b.tick{color:#15161c}
.ab-root .tv-spark{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:4px}
.ab-root .tv-spark i{flex:1;background:#3dc975;border-radius:2px 2px 0 0;opacity:.85}
.ab-root .tv-m{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ab-root .tv-mc{background:#22242c;border-radius:10px;padding:10px;display:grid;gap:2px;font-size:11px}
.ab-root .tv-mc i{width:8px;height:8px;border-radius:50%;background:#3dc975;display:block;margin-bottom:4px}
.ab-root .tv-mc.idle i{background:#5e6066}.ab-root .tv-mc.idle em{color:#5e6066}
.ab-root .tv-mc b{color:#fff;font-weight:600;font-size:12px}.ab-root .tv-mc em{font-style:normal;color:#aab0bd}
.ab-root .app-everyone .app-foot .btn{background:#2f3140}
.ab-root .app-everyone .done-bar{background:#1f3a2f;color:#9fe3c1}

@media (max-width:767px){
  .ab-root .app>div.sa{grid-template-columns:1fr}.ab-root .sa-ring{display:none}
  .ab-root .app>div.en{grid-template-columns:1fr}.ab-root .en-photo{min-height:140px}
  .ab-root .po-cal{grid-template-columns:110px repeat(10,1fr)}.ab-root .po-row{grid-template-columns:110px 1fr}
  .ab-root .app>div.qc{grid-template-columns:1fr}.ab-root .qc-draw{min-height:150px}
  .ab-root .pr-cols{grid-template-columns:1fr}
  .ab-root .tv-big{grid-template-columns:repeat(2,1fr)}.ab-root .tv-m{grid-template-columns:repeat(3,1fr)}.ab-root .tv-big b{font-size:36px}
}

/* Fulcrum product nav with labels (hero module) + the Archie build demo as the canvas */
.ab-root .panel>.fu-nav{grid-column:1;grid-row:1/-1}
.ab-root .panel.has-nav{grid-template-columns:208px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.ab-root .panel.has-nav>.panel-top,.ab-root .panel.has-nav>.hero-frame{grid-column:2;min-width:0}
.ab-root .fu-nav{background:#15161c;color:#d4d4d6;padding:14px 10px;display:flex;flex-direction:column;gap:2px;font-family:Inter,system-ui,sans-serif;font-size:12.5px;overflow:hidden}
.ab-root .fu-nav .fu-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;color:#fff;font-weight:700;font-size:14px;letter-spacing:-.2px}
.ab-root .fu-nav .fu-brand svg{width:18px;height:18px}
.ab-root .fu-nav .fu-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:7px;color:#d4d4d6}
.ab-root .fu-nav .fu-item.on{background:#2a2c36;color:#fff}
.ab-root .fu-nav .fu-item.on b{color:#e8ff5e}
.ab-root .fu-nav .fu-item b{font-weight:500}
.ab-root .fu-nav .fu-item i{width:6px;height:6px;border-right:1.5px solid #7f7f84;border-bottom:1.5px solid #7f7f84;transform:rotate(-45deg)}
.ab-root .fu-nav .fu-item.open i{transform:rotate(45deg)}
.ab-root .fu-nav .fu-sub{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 22px}
.ab-root .fu-nav .fu-sub span{padding:5px 8px;border-radius:6px;color:#aab0bd;font-size:12px}
.ab-root .fu-nav .fu-sub span.on{color:#fff;background:#2a2c36}
.ab-root .fu-nav .fu-av{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px;color:#aab0bd;font-size:12px}
.ab-root .fu-nav .fu-av i{width:26px;height:26px;border-radius:50%;background:#ff8a1d;color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;font-style:normal;border:0;transform:none}
.ab-root .hero-frame{position:relative;background:#fff;min-height:680px}
.ab-root .hero-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:991px){.ab-root .panel.has-nav{grid-template-columns:minmax(0,1fr)}.ab-root .panel>.fu-nav{display:none}.ab-root .panel.has-nav>.panel-top,.ab-root .panel.has-nav>.hero-frame{grid-column:1}.ab-root .hero-frame{min-height:520px}}