/* ==========================================================================
   PiPO HRIS — LAYER 10 · WORKFORCE INTELLIGENCE (Homepage Phase 7)
   Chart palette validated against the #0B1A16 dark surface:
     series-1 #12A87A emerald · series-2 #7B5BEA violet · series-3 var(--purple) magenta
     series-4 #B08F45 PiPO Gold — reserved for the strategic/cost series only,
              never a generic fourth colour. Validated as a 4-slot categorical
              palette: worst adjacent CVD ΔE 14.7 (deutan), all checks pass.
     neutral  #6E7F7A (explicitly labelled "Other", never a hue slot)
   Every series is direct-labelled, so identity never rests on colour alone.
   ========================================================================== */

.wint { position: relative; overflow: hidden; }
.wint__head { max-width: 800px; }
.wint__head h2 { margin-top: 1.1rem; }
.wint__head .lede { margin-top: 1.2rem; }

/* ── Executive dashboard ────────────────────────────────────────────────── */
.exec {
  margin-top: clamp(34px, 4vw, 56px);
  border-radius: var(--r-shot);
  border: 1px solid rgba(255,255,255,.14);
  background: #0B1A16;
  box-shadow: 0 34px 90px rgba(3,10,8,.6);
  overflow: hidden;
}
.exec__bar { display: flex; align-items: center; gap: .5rem; padding: 10px 14px; background: #0E211C; border-bottom: 1px solid rgba(255,255,255,.08); }
.exec__bar .dots { display: flex; gap: 5px; }
.exec__bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); display: block; }
.exec__bar .url { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.58); margin-inline: auto; }

/* filter row — one row, above the charts */
.exec__filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.07); align-items: center; }
.exec__filters .fl {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: 10.5px; color: rgba(255,255,255,.66);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; padding: 5px 9px;
}
.exec__filters .fl b { color: #fff; font-weight: 600; }
.exec__filters .fl svg { width: 9px; height: 9px; opacity: .5; }
.exec__filters .spacer { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.58); }

.exec__body { padding: clamp(14px, 1.6vw, 20px); display: grid; gap: 10px; }

/* KPI strip — hero numbers, not charts */
.kstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 860px) { .kstrip { grid-template-columns: repeat(2, 1fr); } }
.ktile { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 14px 15px; }
.ktile__k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.ktile__v { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.15rem); font-weight: 700; letter-spacing: -.048em; color: #fff; line-height: 1; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.ktile__v small { font-size: .5em; font-weight: 600; letter-spacing: -.02em; }
.ktile__d { display: flex; align-items: center; gap: .35em; font-size: 10px; color: rgba(255,255,255,.58); margin-top: .5rem; }
.ktile__d svg { width: 10px; height: 10px; flex: none; }
.ktile__spark { margin-top: 10px; }
.ktile__spark svg { width: 100%; height: 26px; display: block; overflow: visible; }
/* the strategic metric — the strongest single gold moment on the page */
.ktile--gold { border-color: var(--gold-line); background: rgba(176,143,69,.09); }
.ktile--gold .ktile__v { color: var(--gold); }
.ktile--gold .ktile__k { color: var(--gold-lt); }

/* chart grid */
.cgrid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; }
@media (max-width: 960px) { .cgrid { grid-template-columns: 1fr; } }
.cgrid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 960px) { .cgrid--3 { grid-template-columns: 1fr; } }

.chart { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 14px 15px 15px; }
.chart__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.chart__h h4, .chart__h b { font-size: 11.5px; font-weight: 600; color: #fff; letter-spacing: -.008em; }
.chart__h span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.chart__sub { font-size: 9.5px; color: rgba(255,255,255,.58); }

/* legend — always present for 2+ series */
.clegend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; }
.clegend span { display: inline-flex; align-items: center; gap: .4em; font-size: 9.5px; color: rgba(255,255,255,.6); }
.clegend i { width: 8px; height: 8px; border-radius: 2px; display: block; flex: none; }

/* line chart */
.cline { margin-top: 10px; }
.cline svg { width: 100%; height: 132px; display: block; overflow: visible; }
.cline .axis { font-family: var(--font-mono); font-size: 7.5px; fill: rgba(255,255,255,.34); }
.cline .grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }

/* stacked composition bar — 2px surface gaps between segments */
.cstack { display: flex; height: 26px; margin-top: 12px; gap: 2px; }
.cstack i { display: block; border-radius: 3px; }
.cstack-labels { display: grid; gap: 7px; margin-top: 12px; }
.cstack-labels > div { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center; font-size: 10px; color: rgba(255,255,255,.62); }
.cstack-labels i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.cstack-labels b { font-family: var(--font-mono); font-size: 10px; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.cstack-labels em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,.58); }

/* horizontal magnitude bars — one hue, 4px rounded data end */
.cbars { display: grid; gap: 9px; margin-top: 12px; }
.cbars > div { display: grid; grid-template-columns: 74px 1fr 56px; gap: 9px; align-items: center; font-size: 10px; color: rgba(255,255,255,.58); }
/* labour cost — the strategic series, in PiPO Gold */
.cbars i { height: 9px; border-radius: 0 4px 4px 0; display: block; background: #B08F45; }
.cbars b { font-family: var(--font-mono); font-size: 10px; color: var(--gold); text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* distribution columns */
.ccols { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 14px; }
.ccols > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.ccols i { display: block; border-radius: 4px 4px 0 0; background: var(--purple); }
.ccols span { font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,.62); text-align: center; }
.ccols b { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.7); text-align: center; font-weight: 500; }

/* exceptions — status carries an icon and a label, never colour alone */
.cexc { display: grid; gap: 1px; margin-top: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; overflow: hidden; }
.cexc > div { background: #0B1A16; padding: 9px 12px; display: grid; grid-template-columns: 16px 1fr auto; gap: 9px; align-items: center; font-size: 10.5px; color: rgba(255,255,255,.7); }
.cexc svg { width: 13px; height: 13px; flex: none; }
.cexc .n { font-family: var(--font-mono); font-size: 11px; color: #fff; font-weight: 500; }
.cexc .warn svg { color: var(--gold); }
.cexc .crit svg { color: #E4837A; }
.cexc .ok svg { color: #35C99A; }

/* ── Five executive questions ───────────────────────────────────────────── */
.qgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: clamp(34px, 3.6vw, 52px);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 1080px) { .qgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .qgrid { grid-template-columns: 1fr; } }
.qcell { background: rgba(11,26,22,.6); padding: 20px 18px 22px; }
.qcell__n { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--emerald-300); }
.qcell h3 { font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: -.022em; margin-top: .65rem; line-height: 1.25; }
.qcell p { font-size: .94rem; line-height: 1.5; color: rgba(255,255,255,.56); margin-top: .5rem; }

/* ── Reporting vs intelligence ──────────────────────────────────────────── */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(34px, 3.6vw, 52px); }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }
.vs__card { border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 28px); }
.vs__card--now { background: rgba(255,255,255,.03); }
.vs__card--pipo { background: linear-gradient(140deg, rgba(8,127,91,.16), rgba(123,91,234,.12)); border-color: rgba(19,185,129,.3); }
.vs__k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.vs__card--pipo .vs__k { color: var(--emerald-300); }
.vs__card ul { display: grid; gap: .5rem; margin-top: 1.1rem; }
.vs__card li { font-size: .95rem; color: rgba(255,255,255,.72); padding-left: 1.2rem; position: relative; }
.vs__card li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 1.5px; border-radius: 1px; background: rgba(255,255,255,.35); }
.vs__card--pipo li::before { width: 6px; height: 6px; border-radius: 2px; top: .42em; background: var(--emerald-400); }

/* ── Editorial close ────────────────────────────────────────────────────── */
.wint__close { margin-top: clamp(40px, 4.4vw, 68px); padding-top: clamp(30px, 3.2vw, 46px); border-top: 1px solid rgba(255,255,255,.12);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 3vw, 54px); align-items: center; }
@media (max-width: 900px) { .wint__close { grid-template-columns: 1fr; } }
.wint__close h3 { font-size: clamp(1.6rem, 2.7vw, 2.3rem); letter-spacing: -.036em; line-height: 1.14; }
.wint__close p { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.66); margin-top: 1rem; }
.wint__rule { height: 1px; width: 40px; background: var(--gold); margin-top: 1.6rem; opacity: .85; }


/* One gold eyebrow on the page. Workforce intelligence is where the brief
   asks gold to be strongest, and it sits on midnight at 6.1:1. */
.wint .eyebrow { color: var(--gold); }