/* Archie Builder page · act panel v16 (Oct 14): the Fulcrum nav with labels (fulcrum-nav.component look) replaces the icon rail,
   and the accepted click fans out to five places in Fulcrum. Loads after hero-apps.css and overrides its .panel.xb column. */
.ab-root .panel.xb{grid-template-columns:200px minmax(0,1fr)}
.ab-root .xb-nav{border-radius:12px 0 0 12px;background:#292932;color:#d4d4d6;display:flex;flex-direction:column;padding:12px 8px;font-size:12.5px;min-height:0;overflow:hidden}
.ab-root .xb-nav-logo{display:flex;align-items:center;gap:7px;padding:4px 6px 12px;color:#fff;font-weight:700;font-size:14px;letter-spacing:-.2px}
.ab-root .xb-nav-logo svg{width:18px;height:18px}
.ab-root .xb-nav-menu{display:flex;flex-direction:column;gap:1px;flex:1;min-height:0}
.ab-root .xb-nl{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;color:#d4d4d6;transition:background .25s,color .25s}
.ab-root .xb-nl svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:#9ea2ad;transition:color .25s}
.ab-root .xb-nl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-root .xb-chev{margin-left:auto;width:6px;height:6px;flex:none;border-right:1.5px solid #7f7f84;border-bottom:1.5px solid #7f7f84;transform:rotate(-45deg);transition:transform .25s}
.ab-root .xb-ni.on>.xb-nl{color:#fff;font-weight:600}.ab-root .xb-ni.on>.xb-nl svg{color:#1d63ed}
.ab-root .xb-ni.peek>.xb-nl{background:#1e1e23;color:#fff}
.ab-root .xb-ni.ping>.xb-nl{background:#1e1e23;color:#fff}.ab-root .xb-ni.ping>.xb-nl svg{color:#e8ff5e}
.ab-root .xb-ni.open .xb-chev{transform:rotate(45deg)}
.ab-root .xb-ns{display:none;flex-direction:column;gap:1px;padding:1px 0 5px}
.ab-root .xb-ni.open .xb-ns{display:flex}
.ab-root .xb-ns span{position:relative;display:block;padding:6px 6px 6px 28px;border-radius:8px;color:#d4d4d6;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-root .xb-ns span.on{background:#1e1e23;color:#fff;font-weight:600}
.ab-root .xb-ns span.on::before{content:'';position:absolute;left:15px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#1d63ed}
.ab-root .xb-nsapp{display:none}
.ab-root .xb-ns .xb-nsapp.new,.ab-root .xb-ns .xb-nsapp.shown,.ab-root .xb-ns .xb-nsapp.on{display:block}
.ab-root .xb-ns .xb-nsapp.new{background:#e8ff5e;color:#15161c;font-weight:600;animation:xbflash 1.4s ease}
.ab-root .xb-ns .xb-nsapp.pick{background:#1d63ed;color:#fff;font-weight:600}
.ab-root .xb-nav-user{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 6px;color:#aab0bd;font-size:12px}
.ab-root .xb-nav-user .xb-rav{margin-top:0}
.ab-root .xb-five{position:absolute;inset:0;z-index:9;display:grid;align-content:center;justify-items:center;gap:18px;padding:24px;background:#fff;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .45s}
.ab-root .xb-five.on{opacity:1}
.ab-root .xb-five-h{text-align:center;display:grid;gap:5px}
.ab-root .xb-five-h b{font-family:'Gilroy','Inter',sans-serif;font-size:26px;font-weight:700;color:#292932;letter-spacing:-.3px;line-height:1.1}
.ab-root .xb-five-h span{font-size:13px;color:#5e6066}
.ab-root .xb-five-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%;max-width:740px}
.ab-root .xb-fp{display:grid;justify-items:center;align-content:start;text-align:center;gap:4px;padding:14px 8px 12px;border:1px solid #e2e2e6;border-radius:12px;background:#fff;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s,border-color .35s,background .35s}
.ab-root .xb-fp.in{opacity:1;transform:none}
.ab-root .xb-fp.on{border-color:#3dc975;background:#f0fdf4}
.ab-root .xb-fp i{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eef3ff;color:#1d63ed;margin-bottom:3px;transition:background .3s,color .3s}
.ab-root .xb-fp i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-root .xb-fp.on i{background:#3dc975;color:#fff}
.ab-root .xb-fp.on i::after{content:'';position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #3dc975;box-sizing:border-box}
.ab-root .xb-fp b{font-size:12.5px;font-weight:600;color:#292932;line-height:1.2}
.ab-root .xb-fp span{font-size:11px;color:#5e6066;line-height:1.35}
.ab-root .xb-five-f{font-size:12px;color:#9a9da5}
@media (max-width:767px){.ab-root .panel.xb{grid-template-columns:minmax(0,1fr)}.ab-root .xb-nav{display:none}.ab-root .xb-five-g{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-root .xb-five-h b{font-size:20px}.ab-root .xb-five{padding:16px}}

/* v2 (Oct 14 pm): Jen ticks each line as it lands; the tick turns green once the due date is written */
.ab-root .xb .xf-t.pick .st{opacity:1;background:#1d63ed;border-color:#1d63ed;position:relative}
.ab-root .xb .xf-t.pick .st::after{content:'';position:absolute;left:4px;top:1.5px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ab-root .xb .xf-t.applied .st{background:var(--green);border-color:var(--green)}

/* v4 (Oct 14 pm): the published app opens in a fresh page load; the write-back moves the board (dates swap in, a strip fills, rows re-sort) */
.ab-root .xb-main{position:relative}
.ab-root .xb-reload{position:absolute;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s}
.ab-root .xb-reload.on{opacity:1}
.ab-root .xb-reload i{position:absolute;left:0;top:0;height:3px;width:0;background:#1d63ed;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.ab-root .xb-reload span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;font-size:13px;color:#5e6066;white-space:nowrap}
.ab-root .xb-reload b{width:16px;height:16px;border-radius:50%;border:2px solid #e2e2e6;border-top-color:#1d63ed;animation:xbspin .8s linear infinite}
@keyframes xbspin{to{transform:rotate(360deg)}}
.ab-root .xb-strip{display:none;align-items:center;gap:10px;margin:0 0 8px;padding:8px 12px;border-radius:8px;background:#f0fdf4;border:1px solid #bfe8cf;font-size:12px;color:#166534;white-space:nowrap}
.ab-root .xb-strip.on{display:flex;animation:xbSwapIn .3s ease both}
.ab-root .xb-strip .xb-bar{flex:1;height:6px;border-radius:999px;background:#d8f4e3;overflow:hidden}
.ab-root .xb-strip .xb-bar i{display:block;height:100%;width:0;background:#3dc975;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.ab-root .xb-strip b{font-weight:700}
.ab-root .xb .xf-t.writing{background:#eef3ff}
.ab-root .xb .xf-t .cur{display:inline-block;transition:opacity .17s,transform .17s}
.ab-root .xb .xf-t .cur.swap-out{opacity:0;transform:translateY(-6px)}
.ab-root .xb .xf-t .cur.swap-in{animation:xbSwapIn .32s cubic-bezier(.2,.8,.2,1) both;font-weight:600;color:#166534}
.ab-root .xb .xf-t .xb-written{font-size:11px;font-weight:600;color:#166534;white-space:nowrap}
@keyframes xbSwapIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* v5 (Oct 14 pm): the five-places card sits over the whole panel, not inside the app, so it never reads as a product screen */
.ab-root .panel.xb{position:relative}