/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — HR modules 7–8 + differentiator systems
   document centre · automation graph · digital twin · well-being · strategy · gov
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. DOCUMENT CENTRE
   ───────────────────────────────────────────────────────────── */
.dtypes{display:grid;gap:5px}
.dtype{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  font-size:12.8px;transition:all .2s var(--ease)}
.dtype:hover{background:var(--bg-hover);transform:translateX(3px)}
.dtype__ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;
  color:var(--tone,var(--blue-hi));background:color-mix(in srgb,var(--tone,#3B8CFF) 15%,transparent)}
.dtype__n{flex:1;min-width:0;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtype__v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--tx-2)}

.fchk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line);
  background:var(--bg-tile);display:inline-block;vertical-align:middle;flex-shrink:0}

/* pdf preview */
.pdfbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line-soft);background:var(--bg-tile);margin-bottom:13px}
.pdfbar__pg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx-3)}
.pdfbar__pg input{width:36px;height:26px;text-align:center;border-radius:6px;
  border:1px solid var(--line);background:var(--bg-input);color:var(--tx);font-size:12px}
.pdfbar__r{margin-left:auto;display:flex;gap:4px}
.pdfview{display:flex;gap:13px;align-items:flex-start}
.pdfpage{flex:1;min-width:0;border-radius:8px;padding:26px 30px;line-height:1.9;font-size:12.5px;
  background:#F4F6FA;color:#16233A;border:1px solid rgba(20,40,80,.16);min-height:260px}
.pdfpage h4{text-align:center;font-size:16px;font-weight:800;margin-bottom:2px}
.pdfpage .sub{text-align:center;font-size:12px;color:#4B5C7A;margin-bottom:18px}
.pdfpage p{margin-bottom:11px}
.pdfpage b{font-weight:700}
.pdfthumbs{display:grid;gap:9px;flex-shrink:0;width:78px}
.pdfthumbs figure{margin:0;border-radius:5px;overflow:hidden;border:1.5px solid var(--line-soft);
  background:#E9EDF5;height:96px;position:relative;cursor:pointer;transition:border-color .2s}
.pdfthumbs figure.on{border-color:var(--blue-hi)}
.pdfthumbs figure::after{content:attr(data-p);position:absolute;bottom:2px;right:4px;
  font-size:8.5px;color:#5A6B88}
.pdfthumbs i{display:block;height:4px;background:#B9C6DC;border-radius:2px;margin:7px 8px}
.pdfthumbs i:first-of-type{margin-top:11px;width:60%}
.pdfthumbs i:nth-of-type(4){width:70%}

.actrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.actrow:last-child{border-bottom:0}
.actrow__av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;font-style:normal;
  background:linear-gradient(135deg,var(--tone,#3B8CFF),color-mix(in srgb,var(--tone,#3B8CFF) 55%,#0A1830))}
.actrow__tx{flex:1;min-width:0}
.actrow__n{font-size:12.5px;font-weight:700}
.actrow__s{font-size:11px;color:var(--tx-3);margin-top:2px;line-height:1.4}

/* ─────────────────────────────────────────────────────────────
   2. AUTOMATION WORKFLOW GRAPH
   ───────────────────────────────────────────────────────────── */
.wfwrap{border:1px solid var(--line-soft);border-radius:14px;background:var(--bg-card-2);padding:22px 18px;
  background-image:radial-gradient(circle,rgba(90,150,235,.09) 1px,transparent 1px);background-size:20px 20px;
  overflow-x:auto}
.wfrow{display:flex;align-items:flex-start;gap:0;min-width:940px}
.wfrow + .wfrow{margin-top:28px}
.wfnode{position:relative;flex:1;min-width:118px;padding:13px 12px;border-radius:12px;
  border:1.5px solid color-mix(in srgb,var(--tone,#3B8CFF) 40%,transparent);
  background:color-mix(in srgb,var(--tone,#3B8CFF) 10%,transparent);text-align:center;
  transition:all .22s var(--ease)}
.wfnode:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(10,50,130,.3)}
.wfnode__i{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:#fff;background:var(--tone,#3B8CFF);
  box-shadow:0 0 0 3px var(--bg-card-2)}
.wfnode__ic{width:30px;height:30px;margin:4px auto 8px;border-radius:9px;display:grid;place-items:center;
  color:var(--tone,var(--blue-hi));background:color-mix(in srgb,var(--tone,#3B8CFF) 18%,transparent)}
.wfnode__t{font-size:11.8px;font-weight:700;line-height:1.3}
.wfnode__s{font-size:10px;color:var(--tx-3);margin-top:8px}
.wfarrow{flex:0 0 30px;display:grid;place-items:center;padding-top:38px;color:var(--tx-4)}
.wflgd{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--tx-3)}
.wflgd span{display:flex;align-items:center;gap:7px}
.wflgd i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.wflgd .tot{margin-left:auto;color:var(--tx-2);font-weight:600}

.tmpl{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.tmpl a{padding:14px 12px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-tile);
  transition:all .22s var(--ease)}
.tmpl a:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.tmpl .tile{margin-bottom:10px}
.tmpl__t{font-size:12.2px;font-weight:700;line-height:1.3}
.tmpl__s{font-size:10.5px;color:var(--tx-3);margin-top:5px;line-height:1.45}

/* ─────────────────────────────────────────────────────────────
   3. FUNNEL
   ───────────────────────────────────────────────────────────── */
.funnel{display:grid;gap:6px}
.funnel li{display:flex;align-items:center;gap:13px}
.funnel b{flex-shrink:0;display:grid;place-items:center;height:34px;border-radius:6px;
  font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(120deg,var(--c),color-mix(in srgb,var(--c) 55%,#0A1830))}
.funnel span{font-size:12px;color:var(--tx-2);display:flex;align-items:center;gap:8px}
.funnel span i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.funnel li:nth-child(1) b{width:74%} .funnel li:nth-child(2) b{width:58%}
.funnel li:nth-child(3) b{width:42%} .funnel li:nth-child(4) b{width:28%}

/* ─────────────────────────────────────────────────────────────
   4. GAUGE (semi-donut)
   ───────────────────────────────────────────────────────────── */
.gaugebox{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gaugebox svg{width:150px;height:150px;flex-shrink:0}
.gaugebox text.g-v{font-size:20px;font-weight:800;fill:#EAF2FF}
.gaugebox text.g-k{font-size:8.5px;fill:var(--tx-3)}

/* ─────────────────────────────────────────────────────────────
   5. CAREER LADDER
   ───────────────────────────────────────────────────────────── */
.ladder{display:grid;gap:0;position:relative;padding-left:26px}
.ladder::before{content:"";position:absolute;left:9px;top:14px;bottom:20px;width:1.5px;background:var(--line)}
.ladder li{position:relative;display:flex;align-items:center;gap:12px;padding:11px 0}
.ladder li::before{content:attr(data-n);position:absolute;left:-26px;top:16px;width:19px;height:19px;
  border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;
  background:var(--tone,#3B8CFF);box-shadow:0 0 0 3px var(--bg-card)}
.ladder__tx{flex:1;min-width:0}
.ladder__n{font-size:13px;font-weight:700}
.ladder__l{font-size:11px;color:var(--tx-3);margin-top:2px}
.ladder__v{text-align:right;flex-shrink:0}
.ladder__p{font-size:13.5px;font-weight:800;color:var(--tone,var(--blue-hi));font-variant-numeric:tabular-nums}
.ladder__w{font-size:10.5px;color:var(--tx-3);margin-top:2px}

/* current role card */
.nowrole{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;margin-bottom:14px;
  border:1px solid rgba(77,163,255,.26);background:rgba(46,139,255,.09)}
.nowrole__n{font-size:14px;font-weight:800}
.nowrole__l{font-size:11.5px;color:var(--tx-3);margin-top:2px}

/* simulation tiles */
.simrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.simcell{padding:16px;border-radius:13px;border:1px solid var(--line-soft);background:var(--bg-tile)}
.simcell__k{font-size:12.5px;color:var(--tx-2);line-height:1.45}
.simcell__v{display:flex;align-items:baseline;gap:8px;margin-top:11px}
.simcell__n{font-size:22px;font-weight:800;color:var(--up)}
.simcell svg{margin-top:11px;width:100%;height:44px}

/* ─────────────────────────────────────────────────────────────
   6. WELL-BEING
   ───────────────────────────────────────────────────────────── */
.rheat{width:100%;border-collapse:separate;border-spacing:3px;font-size:11.5px}
.rheat th{font-weight:600;color:var(--tx-3);padding:5px 7px;font-size:10.5px;white-space:nowrap}
.rheat thead th{text-align:center}
.rheat tbody th{text-align:left;color:var(--tx-2)}
.rheat td{text-align:center;padding:9px 6px;border-radius:5px;font-weight:700;font-size:11px}
.r-hi{background:rgba(224,82,76,.24);color:#FCA5A5;border:1px solid rgba(224,82,76,.4)}
.r-vhi{background:rgba(224,82,76,.42);color:#FFD7D7;border:1px solid rgba(224,82,76,.6)}
.r-md{background:rgba(240,169,60,.2);color:#FCD9A0;border:1px solid rgba(240,169,60,.36)}
.r-lo{background:rgba(34,199,122,.18);color:#A8ECC8;border:1px solid rgba(34,199,122,.34)}

.quote2{position:relative;padding:16px 16px 16px 42px;border-radius:12px;
  border:1px solid var(--line-soft);background:var(--bg-tile)}
.quote2::before{content:"“";position:absolute;left:14px;top:6px;font-size:38px;line-height:1;color:var(--blue-hi);opacity:.5}
.quote2 p{font-size:12.5px;line-height:1.65;color:var(--tx-2)}
.quote2 cite{display:block;margin-top:10px;font-size:11px;font-style:normal;color:var(--tx-3)}
.dots2{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dots2 i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots2 i.on{background:var(--blue-hi);width:18px;border-radius:99px}

/* ─────────────────────────────────────────────────────────────
   7. STRATEGY — recommendation cards
   ───────────────────────────────────────────────────────────── */
.srec{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.srec article{padding:15px;border-radius:13px;border:1px solid var(--line-soft);background:var(--bg-tile);
  transition:all .22s var(--ease)}
.srec article:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.srec__t{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.srec__p{font-size:11.5px;line-height:1.6;color:var(--tx-3);margin:10px 0 12px}

.scen{display:grid;gap:11px}
.scen article{padding:13px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-tile);
  transition:all .22s var(--ease)}
.scen article:hover{border-color:var(--line-hot)}
.scen article.on{border-color:rgba(46,212,122,.45);background:rgba(46,212,122,.07)}
.scen__t{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700}
.scen__r{display:flex;gap:18px;margin-top:9px;font-size:11px;color:var(--tx-3)}
.scen__r b{display:block;font-size:12.5px;font-weight:800;color:var(--tx);margin-top:2px}

/* ─────────────────────────────────────────────────────────────
   8. GOVERNMENT SERVICES
   ───────────────────────────────────────────────────────────── */
.agencies{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.agency{display:flex;flex-direction:column;padding:17px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg-card);transition:all .22s var(--ease)}
.agency:hover{border-color:var(--line-hot);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.agency__hd{display:flex;align-items:flex-start;gap:12px}
.agency__mk{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  color:var(--tone,var(--blue-hi));
  background:color-mix(in srgb,var(--tone,#3B8CFF) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,#3B8CFF) 28%,transparent)}
.agency__n{font-size:13.5px;font-weight:800;line-height:1.3}
.agency__e{font-size:10.5px;color:var(--tx-3);margin-top:3px}
.agency__ul{margin:14px 0 15px;display:grid;gap:8px;flex:1}
.agency__ul li{position:relative;padding-left:14px;font-size:11.8px;color:var(--tx-2);line-height:1.45}
.agency__ul li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--tone,var(--blue-hi))}
.agency__ft{display:flex;align-items:center;justify-content:space-between;gap:12px}
.agency__ct{font-size:11px;color:var(--tx-3)}
.agency__badge{position:absolute;top:12px;right:12px;padding:2px 8px;border-radius:999px;
  font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#FB923C,#D2691B)}
.agency{position:relative}

.svctabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.svctabs__lbl{font-size:13px;font-weight:700;margin-right:12px}

.contacts{display:grid;gap:2px}
.contact{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:9px;font-size:12.2px;
  transition:background .2s}
.contact:hover{background:var(--bg-hover)}
.contact b{flex:1;font-weight:500;color:var(--tx-2)}
.contact span{font-weight:700;color:var(--tx-3);font-variant-numeric:tabular-nums}

.timebars{display:grid;gap:11px}
.timebars li{display:grid;grid-template-columns:100px 1fr 58px;align-items:center;gap:11px;font-size:12px}
.timebars b{font-weight:500;color:var(--tx-2)}
.timebars span{text-align:right;color:var(--tx-3);font-variant-numeric:tabular-nums}
.timebars i{display:block;height:9px;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#0A1830))}

/* ─────────────────────────────────────────────────────────────
   9. GRID
   ───────────────────────────────────────────────────────────── */
.g-doc{display:grid;grid-template-columns:250px minmax(0,1fr) 330px;gap:16px;align-items:start}
.g-twin{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr) minmax(0,1.05fr);gap:16px}
.g-2-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}

@media (max-width:1660px){
  .agencies{grid-template-columns:repeat(3,1fr)}
  .srec{grid-template-columns:repeat(2,1fr)}
  .simrow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1480px){
  .g-doc{grid-template-columns:minmax(0,1fr) 330px}
  .g-doc > *:first-child{grid-column:1/-1}
  .g-twin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:1180px){
  .agencies{grid-template-columns:repeat(2,1fr)}
  .g-doc,.g-twin,.g-2-2{grid-template-columns:minmax(0,1fr)}
  .g-doc > *:first-child{grid-column:auto}
  .tmpl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .agencies,.srec,.simrow,.tmpl{grid-template-columns:minmax(0,1fr)}
  .pdfview{flex-direction:column}
  .pdfthumbs{display:flex;width:100%;overflow-x:auto}
  .pdfthumbs figure{flex:0 0 68px}
}
@media (prefers-reduced-motion:reduce){
  .funnel b,.timebars i{transition:none!important}
}