/* Technology page kit, shared skin (TECH-KIT, UD-048): a developer workspace drawn in CSS, for every technology page that
   is not a store platform (Laravel, WordPress, React and the rest). Two uses, both from this one file:
   1. How We Work (.dv inside .hwj): a project workspace on the kit's step mechanics and 640 x 420 canvas (tech-page.css),
      with a sidebar whose lit item follows the step: Overview, Board, Design, Code, Checks, Insights.
   2. The hero (.dv--hero inside .dv-hero): a still project dashboard, no animation and no image file, sized in --u
      (1/640 of its width, a container unit) so it scales with no script; for pages with no store screenshot to show.
   Derived from magento-admin.css (same layout, tested at four widths); neutral developer colours, no product logo.
   White text sits on #0969da (5.2:1). The menu labels and scene contents are each page's own markup. */
/* 1. How We Work */
.hwj .dv{position:absolute;inset:0;display:grid;grid-template-rows:30px minmax(0,1fr);background:#fff;color:#303030;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
/* Admin bar */
.dv__bar{display:flex;align-items:center;gap:12px;padding:0 10px;border-bottom:1px solid #e3e3e3;font-size:10.5px;color:#303030}
.dv__mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#303030;font-size:9px;font-weight:800;color:#fff}
.dv__search{display:flex;align-items:center;gap:6px;flex:1;max-width:230px;height:20px;margin:0 auto;padding:0 8px;border:1px solid #e3e3e3;border-radius:4px;background:#f8f8f8;font-size:9.5px;color:#adadad}
.dv__search::before{content:"";width:8px;height:8px;border:1.5px solid #adadad;border-radius:50%}
.dv__bar span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.dv__howdy{margin-left:auto;font-weight:600}
.dv__howdy i{display:inline-block;width:14px;height:14px;border-radius:2px;background:#00B26B}
/* Sidebar and content */
.dv__body{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:0}
.dv__nav{display:flex;flex-direction:column;gap:1px;padding:6px 0;background:#1f2328}
.dv__nav > span{position:relative;display:flex;align-items:center;gap:7px;height:21px;padding:0 9px;font-size:10.5px;color:#f8f8f8;transition:background-color .3s,color .3s}
.dv__nav > span::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:#adadad;opacity:.7;transition:background-color .3s,opacity .3s}
.dv__sep{height:6px}
/* the lit item follows the step: overview, board, design, code, checks, insights */
.dv:has(#hwj-s0.is-active) [data-nav="overview"],
.dv:has(#hwj-s1.is-active) [data-nav="board"],
.dv:has(#hwj-s2.is-active) [data-nav="design"],
.dv:has(#hwj-s3.is-active) [data-nav="code"],
.dv:has(#hwj-s4.is-active) [data-nav="checks"],
.dv:has(#hwj-s5.is-active) [data-nav="insights"]{background:#30363d;color:#fff;box-shadow:inset 3px 0 0 #2f81f7}
.dv:has(#hwj-s0.is-active) [data-nav="overview"]::before,
.dv:has(#hwj-s1.is-active) [data-nav="board"]::before,
.dv:has(#hwj-s2.is-active) [data-nav="design"]::before,
.dv:has(#hwj-s3.is-active) [data-nav="code"]::before,
.dv:has(#hwj-s4.is-active) [data-nav="checks"]::before,
.dv:has(#hwj-s5.is-active) [data-nav="insights"]::before{background:#79c0ff;opacity:1}
.dv__main{position:relative;min-height:0;background:#f8f8f8}
.hwj .dv .hwj__scene{padding:0}
/* Page header strip, then the page body */
.dv-hd{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-bottom:1px solid #e3e3e3;background:#fff}
.dv-hd b{font-size:13px;font-weight:600;color:#303030}
.dv-hd small{font-size:10.5px;color:#6b6b6b}
.dv-hd .dv-btn{margin-left:auto}
.dv-pg{padding:12px 14px}
/* Control-panel parts */
.dv-card{border:1px solid #e3e3e3;border-radius:4px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.dv-btn{display:inline-flex;align-items:center;height:22px;padding:0 10px;border:1px solid #0969da;border-radius:4px;background:#0969da;color:#fff;font-size:10.5px;font-weight:500;white-space:nowrap}
.dv-btn--sec{background:#f6f7f7;color:#0969da}
.dv-badge{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:999px;background:#e5e5e5;font-size:10px;font-weight:500;color:#454545;white-space:nowrap}
.dv-badge--ok{background:#e6f8ea;color:#1d7a30}      /* control panel success */
.dv-badge--info{background:#e5f0fa;color:#00699d}    /* info */
.dv-badge--warn{background:#fff3d1;color:#8a6400}    /* pending */
.dv-t{display:block;font-size:12px;font-weight:600;color:#303030}
.dv-s{display:block;font-size:10.5px;color:#6b6b6b}
.dv-link{font-size:10.5px;color:#0969da}
.dv-ck{position:relative;flex:none;width:18px;height:18px}
.dv-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #b1bac4;border-radius:50%}
.dv-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0969da;color:#fff;transform:scale(0)}
.hwj .dv-ck .i{width:10px;height:10px}
.hwj .is-active .dv-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
@keyframes dvGrow{to{transform:scaleX(1)}}
/* 1. Discovery call: the project overview, a brief filled in from the call */
.dv0{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;align-items:start}
.dv0__tasks{padding:12px 14px}
.dv0__bar{height:5px;margin:9px 0 2px;border-radius:999px;background:#e3e3e3;overflow:hidden}
.dv0__bar i{display:block;width:100%;height:100%;border-radius:inherit;background:#0969da;transform:scaleX(0);transform-origin:left}
.hwj .is-active .dv0__bar i{animation:dvGrow 1.9s ease-out .9s forwards}
.dv0__row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f8f8f8}
.dv0__row:first-of-type{margin-top:8px}
.dv0__row div{flex:1}
.dv0__row .sk{height:6px;margin-top:5px}
.dv0__row--goal .dv-t{color:#1d7a30}
.dv0__call{padding:12px;text-align:center}
.dv0__avs{display:flex;justify-content:center;margin:8px 0}
.dv0__avs span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:-8px;border:2px solid #fff;border-radius:50%;background:#e3e3e3;font-size:10.5px;font-weight:700}
.dv0__avs span:first-child{margin-left:0}
.dv0__avs span:last-child{background:#00B26B;color:#04150D}
.dv0__call .dv-badge{margin-top:8px}
/* 2. Plan and scope: the approach chosen, then data, integrations and URLs mapped on the board */
.dv1{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.dv1 .dv-card{padding:11px 12px}
.dv1__theme{position:relative;display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 9px;border:1px solid #e3e3e3;border-radius:2px;background:#fff}
.dv1__shot{flex:none;width:40px;height:30px;border:1px solid #e3e3e3;background:linear-gradient(180deg,#30363d 0 22%,#f6f7f7 22% 62%,#e3e3e3 62%)}
.dv1__theme div{flex:1}
.hwj .is-active .dv1__pick{animation:hwjIn .55s var(--ease) 390ms both,dvPick .35s ease 1.5s forwards}
@keyframes dvPick{to{border-color:#0969da;box-shadow:0 0 0 2px rgba(9,105,218,.25)}}
.dv1__pick .s1__tick{top:50%;right:9px;background:#0969da;transform:translateY(-50%) scale(0)}
.hwj .is-active .dv1__pick .s1__tick{animation:dvTick .35s var(--ease) 1.6s forwards}
@keyframes dvTick{to{transform:translateY(-50%) scale(1)}}
.dv1__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.dv1__row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11px;font-weight:600}
.dv1__row span{flex:none;width:72px}
.dv1__track{flex:1;height:5px;border-radius:999px;background:#e3e3e3;overflow:hidden}
.dv1__track i{display:block;width:100%;height:100%;border-radius:inherit;background:#0969da;transform:scaleX(0);transform-origin:left}
.hwj .is-active .dv1__track i{animation:dvGrow .9s ease-out calc(var(--d,0) * 300ms + 900ms) forwards}
.dv1__note{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:10.5px;color:#6b6b6b}
/* 3. Design: screens and components on the left, the page on the right */
.dv2{display:grid;grid-template-columns:138px minmax(0,1fr);gap:10px;height:calc(100% - 58px)}
.dv2__list{padding:9px}
.dv2__list .dv-t{margin-bottom:5px;font-size:11px}
.dv2__blk{display:flex;align-items:center;gap:6px;height:23px;padding:0 6px;font-size:10.5px;color:#303030;white-space:nowrap;overflow:hidden}
.dv2__blk::before{content:"";flex:none;width:9px;height:9px;border:1.5px solid #8c8f94;border-radius:2px}
.dv2__blk.is-on{background:#0969da;color:#fff}
.dv2__blk.is-on::before{border-color:#fff}
.dv2__add{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:6px 0 0 6px;border-radius:2px;background:#1e1e1e;color:#fff;font-size:14px;line-height:1}
.dv2__view{position:relative;padding:10px;overflow:hidden}
.dv2__view .s2{height:auto}
.dv2__view .s2__hero{padding:12px}
.dv2__view .s2__img{height:88px}
.dv2__view .s2__pi{height:50px}
.dv2__view .s2__prods{gap:8px}
/* 4. Build on staging: the code and its files, with review feedback going straight in */
.dv3{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:10px;height:calc(100% - 58px)}
.dv3__files{padding:9px;font-size:10.5px}
.dv3__files small{display:block;margin:7px 0 3px;font-size:9.5px;font-weight:600;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv3__files small:first-child{margin-top:0}
.dv3__files span{display:block;height:19px;padding:0 5px;line-height:19px;color:#0969da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv3__files span.is-on{background:#f8f8f8;font-weight:600;color:#303030}
.dv3 .s3__code{border-radius:2px;background:#1e1e1e}
.dv3 .s3__tabs{gap:4px}
.dv3 .s3__tabs b{padding:3px 8px;border-radius:2px;background:rgba(255,255,255,.08);font-size:9.5px;font-weight:600;color:rgba(255,255,255,.55)}
.dv3 .s3__tabs b:first-child{background:rgba(9,105,218,.28);color:#a5d6ff}
.dv3 .s3__msg--you{right:146px;bottom:84px}
.dv3 .s3__msg--us{right:160px;bottom:22px}
/* 5. QA and launch: the checks pass, then staging is deployed to production */
.dv4{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;align-items:start}
.dv4 .s4__list{padding:11px 13px;border-radius:2px}
.dv4 .s4__row{padding:8px 0;font-size:12px}
.dv4 .s4__spin{border-top-color:#0969da}
.dv4 .s4__ok{background:#1d7a30}
.dv4__push{padding:11px 12px}
.dv4__env{display:flex;align-items:center;gap:8px;margin-top:9px}
.dv4__env span{flex:1;padding:7px 8px;border:1px solid #e3e3e3;border-radius:2px;font-size:10.5px;font-weight:600;text-align:center}
.dv4__env span:last-child{border-color:#e6f8ea;background:#effaf1;color:#1d7a30}
.dv4__env em{flex:none;font-style:normal;color:#0969da}
.dv4__pub{position:relative;height:22px;margin-top:11px}
.dv4__pub > *{position:absolute;left:0;top:0}
.dv4__live{top:2px;opacity:0}
.hwj .is-active .dv4__btn{animation:hwjOut .25s ease 2.4s forwards}
.hwj .is-active .dv4__live{animation:hwjIn .4s var(--ease) 2.55s both}
.dv4__note{display:block;margin-top:9px;font-size:10px;line-height:14px;color:#6b6b6b}
/* 6. Run and grow: insights after launch */
.dv5{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;height:calc(100% - 58px)}
.dv5__kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #e3e3e3;background:#fff}
.dv5__kpi{padding:9px 11px;border-left:1px solid #f8f8f8}
.dv5__kpi:first-child{border-left:0}
.dv5__kpi .sk{width:55%;height:9px;margin-top:7px;background:#e3e3e3}
.dv5__kpi em{float:right;padding:0 5px;border-radius:2px;background:#e6f8ea;font-size:9.5px;font-style:normal;font-weight:600;color:#1d7a30}
.dv5 .s5__chart{padding:11px;border-radius:2px}
.dv5 .s5__toasts{gap:7px}
.dv5 .s5__toast{padding:7px 9px;border-radius:2px}
.dv5 .s5__keep{gap:7px}
.dv5 .s5__keep span{padding:4px 11px;border-radius:2px;background:#fff;font-size:11px}
/* Neutral browser bar, so the screen reads as a developer workspace rather than the site's green */
.hwj .hwj__browser{border-color:#d4d4d4}
.hwj .hwj__bar{background:linear-gradient(180deg,#f3f3f3,#e8e8e8);border-bottom:1px solid #d4d4d4}
.hwj .hwj__url{background:#fff;border-color:#dcdcdc;color:#6b6b6b}
.hwj .hwj__status.is-live{background:#e6f8ea;color:#1d7a30}

/* 2. The hero illustration: a still project dashboard in a browser frame. Every size is a multiple of --u, 1/640 of
   the frame's width, so the drawing scales like an image (container query units, no script). The frame reserves its
   final height (34 + 330 units and its 2px border) so it does not grow, and shift the hero, while the page streams in. */
.dv-hero{position:relative;container-type:inline-size;width:100%;padding-bottom:36px}
.dv-hero__frame{--u:calc(100cqw / 640);position:relative;min-height:calc(var(--u) * 364 + 2px);border:1px solid #e3e3e3;border-radius:calc(var(--u) * 12);background:#fff;box-shadow:0 30px 60px -30px rgba(48,48,48,.45);overflow:hidden}
.dv-hero__top{display:flex;align-items:center;gap:calc(var(--u) * 10);height:calc(var(--u) * 34);padding:0 calc(var(--u) * 14);border-bottom:1px solid #e3e3e3;background:linear-gradient(180deg,#f3f3f3,#e8e8e8)}
.dv-hero__top i{width:calc(var(--u) * 9);height:calc(var(--u) * 9);border-radius:50%;background:#d4d4d4}
.dv-hero__top span{margin:0 auto;padding:calc(var(--u) * 3) calc(var(--u) * 14);border:1px solid #dcdcdc;border-radius:999px;background:#fff;font-size:calc(var(--u) * 11);line-height:1.4;color:#6b6b6b}
.dv.dv--hero{position:relative;display:grid;grid-template-columns:calc(var(--u) * 84) minmax(0,1fr);height:calc(var(--u) * 330);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:#303030}
.dv--hero .dh-nav{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u) * 2);padding:calc(var(--u) * 10) 0;background:#1f2328}
.dv--hero .dh-nav span{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 4);padding:calc(var(--u) * 5) 0;font-size:calc(var(--u) * 9);color:#c9d1d9}
.dv--hero .dh-nav span::before{content:"";width:calc(var(--u) * 15);height:calc(var(--u) * 15);border-radius:calc(var(--u) * 3);background:#6e7781}
.dv--hero .dh-nav span.is-on{background:#30363d;color:#fff;box-shadow:inset calc(var(--u) * 3) 0 0 #0969da}
.dv--hero .dh-nav span.is-on::before{background:#79c0ff}
.dv--hero .dh-nav b{display:flex;align-items:center;justify-content:center;width:calc(var(--u) * 34);height:calc(var(--u) * 34);margin:0 auto calc(var(--u) * 8);border-radius:calc(var(--u) * 6);background:#0969da;font-size:calc(var(--u) * 12);color:#fff}
.dv--hero .dh-main{display:flex;flex-direction:column;gap:calc(var(--u) * 10);min-width:0;min-height:0;overflow:hidden;padding:calc(var(--u) * 14) calc(var(--u) * 16);background:#f8f8f8}
.dv--hero .dh-hd{display:flex;align-items:center;gap:calc(var(--u) * 8)}
.dv--hero .dh-hd b{font-size:calc(var(--u) * 19);font-weight:600}
.dv--hero .dh-btn{margin-left:auto;padding:calc(var(--u) * 5) calc(var(--u) * 12);border-radius:calc(var(--u) * 2);background:#0969da;font-size:calc(var(--u) * 10);font-weight:600;color:#fff}
.dv--hero .dh-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u) * 8)}
.dv--hero .dh-kpi{padding:calc(var(--u) * 9) calc(var(--u) * 10);border:1px solid #e3e3e3;background:#fff;font-size:calc(var(--u) * 9.5);color:#6b6b6b}
.dv--hero .dh-kpi i{display:block;width:62%;height:calc(var(--u) * 9);margin-top:calc(var(--u) * 7);border-radius:calc(var(--u) * 2);background:#e3e3e3}
.dv--hero .dh-kpi em{float:right;font-style:normal;font-weight:700;color:#1d7a30}
.dv--hero .dh-row{display:grid;grid-template-columns:1.25fr 1fr;gap:calc(var(--u) * 10);min-height:0;flex:1}
.dv--hero .dh-card{min-width:0;padding:calc(var(--u) * 10) calc(var(--u) * 11);border:1px solid #e3e3e3;background:#fff}
.dv--hero .dh-card > b{display:block;margin-bottom:calc(var(--u) * 7);font-size:calc(var(--u) * 11);font-weight:600}
.dv--hero .dh-chart img{display:block;width:100%;height:auto}
.dv--hero .dh-order{display:flex;align-items:center;gap:calc(var(--u) * 7);padding:calc(var(--u) * 6) 0;border-top:1px solid #f1f1f1}
.dv--hero .dh-order i{flex:1;height:calc(var(--u) * 7);border-radius:calc(var(--u) * 2);background:#e9e9e9}
.dv--hero .dh-st{flex:none;padding:calc(var(--u) * 2) calc(var(--u) * 7);border-radius:999px;font-size:calc(var(--u) * 8.5);font-weight:600}
.dv--hero .dh-st--ok{background:#e6f8ea;color:#1d7a30}
.dv--hero .dh-st--run{background:#e5f0fa;color:#00699d}
.dv--hero .dh-idx{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 6)}
.dv--hero .dh-idx span{display:inline-flex;align-items:center;gap:calc(var(--u) * 5);padding:calc(var(--u) * 4) calc(var(--u) * 8);border:1px solid #e3e3e3;border-radius:calc(var(--u) * 2);background:#fff;font-size:calc(var(--u) * 9.5)}
.dv--hero .dh-idx span::before{content:"";width:calc(var(--u) * 7);height:calc(var(--u) * 7);border-radius:50%;background:#1d7a30}
/* two notes floating over the frame's edge: what the build delivers, not numbers */
.dv-hero__note{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #edf2ef;border-radius:14px;background:#fff;box-shadow:0 18px 40px -20px rgba(15,60,40,.35);font-size:13px;font-weight:600;color:#0f1f2e;white-space:nowrap}
.dv-hero__note i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#e9f8ef;color:#00744A}
.dv-hero__note--a{left:-18px;bottom:0}
.dv-hero__note--b{right:-14px;top:-20px}
@media (max-width:639px){.dv-hero{padding-bottom:0}.dv-hero__note{display:none}}