/* ==========================================================================
   PiPO HRIS — LAYER 09 · WORKFORCE SECTIONS
   Phase 4 · One platform. Every workforce.   (.every)
   Phase 5 · Casual & Frontline Workforce.    (.front)
   Both sit on midnight. Emerald leads, violet supports, magenta is data only.
   ========================================================================== */

/* ══ PHASE 4 ══════════════════════════════════════════════════════════════ */
.every { position: relative; overflow: hidden; background: var(--paper); }
.every__head { max-width: 800px; }
.every__head h2 { margin-top: 1.1rem; }
.every__head .lede { margin-top: 1.2rem; }

/* three-column bridge: corporate → platform ← frontline */
.bridge {
  position: relative;
  display: grid; grid-template-columns: 1fr 250px 1fr;
  gap: 0; align-items: stretch;
  margin-top: clamp(38px, 4.4vw, 64px);
}
/* the connector: corporate → PiPO ← frontline */
.bridge::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: 50%;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(8,127,91,.30) 22%, rgba(8,127,91,.55) 50%, rgba(8,127,91,.30) 78%, transparent 100%);
}
@media (max-width: 1080px) { .bridge::before { display: none; } }
@media (max-width: 1080px) { .bridge { grid-template-columns: 1fr; gap: 18px; } }

.wside {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--paper);
}
.wside--front {
  background:
    radial-gradient(420px 260px at 80% 6%, rgba(19,185,129,.16), transparent 68%),
    var(--paper);
  border-color: rgba(19,185,129,.28);
}
.wside__k {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted-2);
}
.wside--front .wside__k { color: var(--emerald-700); }
.wside h3 { margin-top: .8rem; font-size: clamp(1.15rem, 1.6vw, 1.42rem); letter-spacing: -.026em; }
.wside__sub { margin-top: .5rem; font-size: .98rem; line-height: 1.55; color: var(--muted); }

.wlist { display: grid; gap: 1px; margin-top: 1.4rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wlist > div { background: #fff; padding: 12px 14px; }
.wlist b { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); letter-spacing: -.014em; }
.wlist span { display: block; font-size: .82rem; line-height: 1.5; color: var(--muted); margin-top: .18rem; }

/* the centre column */
.bcore { display: grid; align-content: center; gap: 12px; padding: 0 clamp(10px, 1.6vw, 22px); }
@media (max-width: 1080px) { .bcore { padding: 0; } }
.bcore__rail { display: grid; place-items: center; }
.bcore__rail i { display: none; }
@media (max-width: 1080px) { .bcore__rail i { display: block; width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(8,127,91,.40), transparent); margin-inline: auto; } }

.bcore__box {
  position: relative; border-radius: var(--r); padding: 16px 14px; text-align: center;
  backdrop-filter: blur(2px);
  background: linear-gradient(140deg, rgba(8,127,91,.10), rgba(63,50,141,.08));
  border: 1px solid rgba(19,185,129,.32);
}
.bcore__box b { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.bcore__box span { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .45rem; line-height: 1.6; }

/* business-function layer */
.wfunc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (max-width: 720px) { .wfunc { grid-template-columns: 1fr; } }
.wfunc > div { background: #fff; padding: 14px 16px; }
.wfunc b { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-700); }
.wfunc span { display: block; font-size: .88rem; color: var(--ink-3); margin-top: .35rem; line-height: 1.5; }

/* editorial callout */
.wcallout {
  margin-top: clamp(40px, 4.6vw, 70px);
  border-top: 1px solid var(--line);
  padding-top: clamp(32px, 3.6vw, 52px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(26px, 3vw, 54px); align-items: center;
}
@media (max-width: 900px) { .wcallout { grid-template-columns: 1fr; } }
.wcallout h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.036em; line-height: 1.1; }
.wcallout p { font-size: 1.02rem; line-height: 1.65; color: var(--ink-3); }

/* workforce types strip */
.wtypes {
  margin-top: clamp(34px, 3.6vw, 52px);
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 14px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem clamp(14px, 2vw, 30px);
}
.wtypes span { display: inline-flex; align-items: center; gap: .5em; font-size: .92rem; color: var(--ink-3); }
.wtypes span::before { content: ''; width: 5px; height: 5px; border-radius: 1.5px; background: var(--emerald); }
.wtypes .lab { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-700); }
.wtypes .lab::before { display: none; }

/* ══ PHASE 5 ══════════════════════════════════════════════════════════════ */
.front { position: relative; overflow: hidden; }
.front__top { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(32px, 4vw, 66px); align-items: center; }
@media (max-width: 1020px) { .front__top { grid-template-columns: 1fr; } }
.front h2 { margin-top: 1.1rem; }
.front__copy { margin-top: 1.3rem; font-size: 1.04rem; line-height: 1.65; color: rgba(255,255,255,.68); max-width: 46ch; }
.front__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

.front__proof { display: grid; gap: 1px; margin-top: 2rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); overflow: hidden; }
.front__proof > div { background: rgba(255,255,255,.03); padding: 12px 15px; font-size: .9rem; color: rgba(255,255,255,.74); display: flex; gap: .7rem; align-items: flex-start; }
.front__proof svg { width: 15px; height: 15px; flex: none; margin-top: .22rem; color: var(--emerald-400); }

/* frontline product surface (dark-chrome app) */
.fsurf {
  border-radius: var(--r-shot); overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 90px rgba(3,10,8,.62);
  background: #0B1A16; font-size: 12px;
}
.fsurf__bar { display: flex; align-items: center; gap: .5rem; padding: 10px 14px; background: #0E211C; border-bottom: 1px solid rgba(255,255,255,.08); }
.fsurf__bar .dots { display: flex; gap: 5px; }
.fsurf__bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); display: block; }
.fsurf__bar .url { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.58); margin-inline: auto; }
.fsurf__body { display: grid; grid-template-columns: 132px 1fr; min-height: 380px; }
@media (max-width: 560px) { .fsurf__body { grid-template-columns: 1fr; } .fsurf__side { display: none; } }
.fsurf__side { background: #091712; border-right: 1px solid rgba(255,255,255,.07); padding: 12px 8px; }
.fsurf__side .s { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px; font-size: 10.5px; color: rgba(255,255,255,.58); }
.fsurf__side .s.on { background: rgba(19,185,129,.14); color: #fff; font-weight: 600; }
.fsurf__side .s i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); flex: none; }
.fsurf__side .s.on i { background: var(--emerald-400); }
.fsurf__main { padding: 15px 17px 18px; }
.fsurf__h { margin-bottom: 12px; }
.fsurf__h h4, .fsurf__h b { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.022em; }
.fsurf__h p { font-size: 10px; color: rgba(255,255,255,.58); margin-top: 3px; }

.fstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 620px) { .fstats { grid-template-columns: repeat(2, 1fr); } }
.fstat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 10px 11px; }
.fstat .k { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.fstat .v { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.04em; color: #fff; margin-top: 4px; line-height: 1; }
.fstat .d { font-size: 9px; color: rgba(255,255,255,.58); margin-top: 3px; }
/* a warning count, not an executive metric — status amber */
.fstat--flag { border-color: rgba(176,134,43,.4); }
.fstat--flag .v { color: var(--st-warning); }

.fpanel { margin-top: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; overflow: hidden; }
.fpanel__h { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.fpanel__h b { font-size: 11px; font-weight: 600; color: #fff; }
.fpanel__h span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; color: rgba(255,255,255,.58); }
.frow { display: grid; gap: 8px; padding: 8px 12px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 10.5px; color: rgba(255,255,255,.7); }
.frow:last-child { border-bottom: 0; }
.frow.hd { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.58); background: rgba(255,255,255,.02); }
.frow b { color: #fff; font-weight: 600; }
.frow .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fpill { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 600; padding: 2.5px 7px; border-radius: 100px; white-space: nowrap; }
.fpill--ok { background: rgba(19,185,129,.16); color: var(--emerald-300); }
.fpill--held { background: rgba(192,57,47,.18); color: #F0938B; }
.fpill--wait { background: rgba(176,134,43,.16); color: #D6A63C; }

/* ── the six-stage frontline workflow ───────────────────────────────────── */
.fflow { margin-top: clamp(44px, 5vw, 76px); }
.fflow__lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.6rem; margin-bottom: clamp(22px, 2.4vw, 34px); }
.fflow__lead h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.03em; }
.fflow__lead span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-300); }

.fstages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; 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) { .fstages { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .fstages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .fstages { grid-template-columns: 1fr; } }
.fstage { background: rgba(11,26,22,.6); padding: 18px 16px 20px; position: relative; }
.fstage__n { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--emerald-300); }
.fstage h4 { font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: -.022em; margin-top: .6rem; }
.fstage p { font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.58); margin-top: .4rem; }
.fstage ul { margin-top: .8rem; display: grid; gap: .25rem; }
.fstage li { font-size: .76rem; color: rgba(255,255,255,.58); padding-left: .8rem; position: relative; line-height: 1.45; }
.fstage li::before { content: ''; position: absolute; left: 0; top: .5em; width: 3px; height: 3px; border-radius: 50%; background: var(--emerald-400); }

.fflow__spine {
  margin-top: 14px; border: 1px dashed rgba(255,255,255,.18); border-radius: var(--r);
  padding: 12px 16px; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.58);
}
.fflow__spine b { color: var(--emerald-300); font-weight: 500; }

/* role strip */
.froles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(40px, 4.4vw, 66px); }
@media (max-width: 760px) { .froles { grid-template-columns: 1fr; } }
.frole { border-top: 2px solid rgba(255,255,255,.14); padding-top: 1.1rem; }
.frole:first-child { border-top-color: var(--emerald); }
.frole b { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--emerald-300); }
.frole h4 { font-size: 1.1rem; color: #fff; margin-top: .6rem; letter-spacing: -.022em; }
.frole p { font-size: .96rem; line-height: 1.55; color: rgba(255,255,255,.58); margin-top: .4rem; }

/* closing */
.fclose {
  margin-top: clamp(44px, 5vw, 76px); padding-top: clamp(32px, 3.4vw, 50px);
  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) { .fclose { grid-template-columns: 1fr; } }
.fclose h3 { font-size: clamp(1.6rem, 2.7vw, 2.3rem); letter-spacing: -.036em; line-height: 1.12; }
.fclose p { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.66); margin-top: 1rem; }
.fbenefits { display: grid; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); overflow: hidden; }
.fbenefits > div { background: rgba(255,255,255,.03); padding: 11px 15px; font-size: .88rem; color: rgba(255,255,255,.74); }


/* The cycle wage value — the premium business signal in the frontline surface. */
.fstat--cost { border-color: var(--gold-line); background: rgba(176,143,69,.07); }
.fstat--cost .v { color: var(--gold); }
.fstat--cost .v small { font-size: .58em; font-weight: 600; margin-left: 1px; }
.fstat--cost .k { color: var(--gold-lt); }