/* B03 Hire, outsource or automate article (layout shared with tb.css) */
.page-hb{--ok:#1c9d61;--okb:#e6f7ee;--ex:#c2570c;--exb:#fff4e6;--no:#c8324f;--nob:#fdecef;--bl:#2d5bd7;--blb:#e8f0ff}

/* chain */
.hb-chain{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:22px 0 6px;counter-reset:c}
.hb-c{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;opacity:.35;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease),border-color .5s,background .5s}
.hb-c b{display:block;font-size:13.5px;line-height:1.25}
.hb-c small{display:block;font-size:11px;color:var(--mut);margin-top:4px}
.hb-c:not(:last-child):after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:#cdb6fb;font-weight:800;font-size:12px;z-index:1}
.hb-c.on{opacity:1;transform:none;border-color:#f3b6c3;background:var(--nob)}
.hb-c.on b{color:var(--no)}

/* three causes */
.hb-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.hb-k{background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:16px;padding:18px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.hb-k:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.hb-k.cap{--c:var(--bl)}.hb-k.pro{--c:var(--ex)}.hb-k.sys{--c:var(--p)}
.hb-k .mono{color:var(--c)}
.tb-art .hb-k h3{font-size:19px;margin:6px 0 8px}
.hb-k>p{font-size:14.5px;line-height:1.55;color:var(--mut)}
.hb-k ul{list-style:none;margin:12px 0 14px;display:flex;flex-direction:column;gap:6px}
.tb-art .hb-k li{font-size:13.5px;line-height:1.45;padding-left:18px;position:relative;color:var(--ink)}
.hb-k li:before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--c)}
.hb-k em{margin-top:auto;font-style:normal;font-size:13px;font-weight:700;color:var(--c);background:var(--lav2);border-radius:10px;padding:8px 10px}

/* diagnostic */
.hq{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:16px;margin-top:20px;align-items:start}
.hq-list{list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:q}
.tb-art .hq-list li{counter-increment:q;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px 10px 14px;font-size:15px;transition:border-color .2s,background .2s}
.hq-list li:before{content:counter(q);flex:none;width:24px;height:24px;border-radius:7px;background:var(--lav);color:var(--p3);font:700 12px/24px "JetBrains Mono",monospace;text-align:center}
.hq-list li p{flex:1;line-height:1.45;color:var(--ink)}
.hq-list li.done{background:var(--lav2)}
.hq-b{display:flex;gap:4px;flex:none}
.hq-b button{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--mut);background:#fff;transition:.2s}
.hq-b button:hover{border-color:#cdb6fb;color:var(--ink)}
.hq-b button.on[data-v="1"]{background:var(--p);border-color:var(--p);color:#fff}
.hq-b button.on[data-v="0"]{background:var(--ink);border-color:var(--ink);color:#fff}
.hq-out{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--sh)}
.hq-bars{display:flex;flex-direction:column;gap:10px;margin:12px 0 16px}
.hq-bars div{display:grid;grid-template-columns:72px minmax(0,1fr) 34px;gap:8px;align-items:center;font-size:13px;font-weight:700}
.hq-bars i{height:10px;border-radius:99px;background:var(--lav);overflow:hidden}
.hq-bars b{display:block;height:100%;width:0;border-radius:99px;transition:width .5s var(--ease)}
.hq-bars [data-f=cap] b{background:var(--bl)}.hq-bars [data-f=pro] b{background:var(--ex)}.hq-bars [data-f=sys] b{background:var(--p)}
.hq-bars em{font-style:normal;color:var(--mut);font-size:12px;text-align:right}
.tb-art .hq-h{font-size:18px;line-height:1.3}
.hq-p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--mut)}
.hq-l{display:inline-block;margin-top:10px;font-size:14.5px}
.hq-r{display:block;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--mut);text-decoration:underline;text-underline-offset:3px}

/* table */
.hb-t th:not(:first-child){color:var(--p3)}
.hb-t td:first-child{font-weight:700;white-space:nowrap;color:var(--mut)!important;font-size:13px}

/* worked example */
.hx{margin-top:20px;border:1px solid var(--line);border-radius:18px;background:var(--lav2);padding:20px}
.hx-tabs{display:flex;flex-wrap:wrap;gap:6px}
.hx-tabs button{font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--mut);transition:.2s}
.hx-tabs button:hover{color:var(--ink);border-color:#cdb6fb}
.hx-tabs button.on{background:var(--p);border-color:var(--p);color:#fff}
.hx-body{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:16px;margin-top:16px}
.hx-in{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hx-in div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.hx-in span{display:block;font-size:11.5px;font-weight:700;color:var(--mut)}
.hx-in b{font-size:22px;letter-spacing:-.02em;transition:color .3s}
.hx-in b.ch{color:var(--p3)}
.hx-g{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.hx-row{display:grid;grid-template-columns:112px minmax(0,1fr) 44px;gap:10px;align-items:center;margin-bottom:10px;font-size:13.5px;font-weight:600}
.hx-row b{text-align:right;font-size:15px}
.hx-bar{height:16px;border-radius:99px;background:var(--lav);overflow:hidden}
.hx-bar i{display:block;height:100%;border-radius:99px;transition:width .6s var(--ease)}
.hx-bar .need{background:linear-gradient(90deg,var(--ex),#e8883c)}
.hx-bar .have{background:linear-gradient(90deg,var(--bl),#5b83ea)}
.hx-st{display:inline-block;margin-top:4px;font-size:13px;font-weight:800;border-radius:999px;padding:4px 12px}
.hx-st.bad{background:var(--nob);color:var(--no)}.hx-st.ok{background:var(--okb);color:var(--ok)}
.tb-art .hx-n{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.hx .tb-small{margin-top:12px}

/* lists */
.hb-ok,.hb-mk{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.tb-art .hb-ok li,.tb-art .hb-mk li{position:relative;padding:11px 16px 11px 46px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:16px;line-height:1.55}
.hb-ok li:before,.hb-mk li:before{position:absolute;left:14px;top:12px;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:800;line-height:22px;text-align:center}
.hb-ok li:before{content:"✓";background:var(--okb);color:var(--ok)}
.hb-mk li:before{content:"✕";background:var(--nob);color:var(--no)}
.hb-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.hb-qs div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.hb-qs b{font-size:16px}
.hb-qs p{margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--mut)}

@media (max-width:1100px){.hq{grid-template-columns:minmax(0,1fr)}.hq-out{position:relative;top:0}}
@media (max-width:900px){.hb-chain{grid-template-columns:repeat(3,minmax(0,1fr))}.hb-c:nth-child(3):after{display:none}.hx-body{grid-template-columns:minmax(0,1fr)}.hx-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){
 .hb-3,.hb-qs{grid-template-columns:minmax(0,1fr)}
 .hb-chain{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-c:nth-child(3):after{display:block}.hb-c:nth-child(even):after{display:none}
 .tb-art .hq-list li{flex-wrap:wrap}.hq-list li p{flex-basis:calc(100% - 40px)}.hq-b{margin-left:36px}
 .hx-in{grid-template-columns:1fr 1fr}
 .hx-row{grid-template-columns:90px minmax(0,1fr) 38px;font-size:12.5px}
 .hb-t td:first-child{white-space:normal}
}