/* Core HR page — bespoke styles (extends overview.css, home.css) */

/* ── Section heading (centered, reused) ─────────────────── */
.ch-sec-head { text-align: center; max-width: 860px; margin: 0 auto; }
.ch-sec-head .display-m em { color: #FF5F1F; font-style: italic; }

/* ── Hero UI wrap (uses ovh grid from employee-database) ── */
.ovh.ed-hero-dark:has(.ch-hero-wrap) .ovh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: clamp(30px, 4vw, 60px) !important; }
.ch-hero-wrap { position: relative; padding: 0; overflow: visible; }
.ovh-media { overflow: visible !important; }
.ovh.ed-hero-dark { overflow: visible; }

/* ── Hero app mock — real-app look with sidebar + main ─── */
.ch-app {
  position: relative;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.30);
}
.ch-app-side { display: none; }
.ch-app-logo {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, #FF5F1F, #E14E10);
  color: #fff;
  display: grid; place-items: center;
  font: 800 10px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: 0.04em;
  box-shadow: 0 6px 14px -6px rgba(255,95,31,0.55);
}
.ch-app-brand-t b { display: block; color: #fff; font: 600 12px/1.15 var(--font-display); }
.ch-app-brand-t small { display: block; margin-top: 2px; color: rgba(255,255,255,0.55); font: 400 10px/1.15 var(--font-body); }
.ch-app-avatar {
  width: 36px; height: 36px; border-radius: 999px;
  background: linear-gradient(135deg, #1497BA, #0D6F87);
  color: #fff;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-body);
  border: 2px solid rgba(255,255,255,0.20);
}
.ch-app-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; width: 100%; }
.ch-app-nav-i {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0 auto;
  border-radius: 10px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  border: 1px solid transparent;
}
.ch-app-nav-i svg { width: 16px; height: 16px; }
.ch-app-nav-i span { display: none; }
.ch-app-nav-i:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); }
.ch-app-nav-i.is-on {
  background: rgba(255,95,31,0.14);
  border-color: rgba(255,95,31,0.28);
  color: #FFB794;
}
.ch-app-main {
  padding: 22px;
  background: transparent;
  min-width: 0;
  border-radius: 18px;
}
.ch-app-topbar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ch-app-topbar b { display: block; font: 600 15px/1.2 var(--font-display); color: var(--ink); }
.ch-app-topbar small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-body); color: var(--ink-2); }
.ch-app-year { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px 6px 8px; border-radius: 999px; background: rgba(0,23,56,0.05); border: 1px solid rgba(0,23,56,0.06); }
.ch-app-year button { width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,23,56,0.10); color: var(--ink-2); font: 700 13px/1 var(--font-body); cursor: pointer; }
.ch-app-year span { font: 700 12px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink); }

/* Balance marquee — single row, slowly looping */
.ch-bal-marquee {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.ch-bal-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: ch-bal-scroll 42s linear infinite;
}
.ch-bal-marquee:hover .ch-bal-track { animation-play-state: paused; }
.ch-app-static .ch-app-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-bal-static .ch-bal-track { animation: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ch-bal-static .ch-bal2 { flex: 1 1 auto; min-width: 0; padding: 12px 12px 10px; }
.ch-bal-static .ch-bal2-t { font-size: 11.5px; margin-bottom: 8px; }
.ch-bal-static .ch-bal2-row { font-size: 10.5px; padding: 2px 0; }
.ch-bal-static .ch-bal2-row b { font-size: 11px; }
.ch-bal-static .ch-bal2-pill { font-size: 10px; padding: 3px 7px; }
.ch-bal-static .ch-bal2-more { font-size: 10.5px; padding-top: 6px; margin-top: 8px; }
@media (max-width: 900px) {
  .ch-bal-static .ch-bal-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ch-bal-static .ch-bal-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────────────────
   RCHLeave · redesigned section (mock left + numbered steps right)
   ───────────────────────────────────────────────────────── */
.ch-leave2 { margin-top: clamp(60px,6.8vw,105px); display: flex; flex-direction: column; gap: 44px; }
.ch-leave2-head { text-align: center; }
.ch-leave2-head .display-m em { color: #FF5F1F; font-style: italic; }
.ch-leave2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
  position: relative;
}
.ch-leave2-visual { min-width: 0; display: flex; }
.ch-leave2-visual-crop { flex: 1; }
.ch-leave2-steps { display: flex; flex-direction: column; gap: 14px; }
.ch-leave2-step-lg { flex: 1; min-height: 260px; }
.ch-leave2-visual { position: relative; min-width: 0; }
.ch-leave2-visual .ov-stage { padding: 14px !important; border-radius: 20px !important; }

.ch-leave2-steps { display: flex; flex-direction: column; gap: 14px; }
.ch-leave2-step-head { display: flex; gap: 16px; align-items: flex-start; }
.ch-leave2-step {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(0,23,56,0.08);
  box-shadow: 0 12px 22px -18px rgba(0,23,56,0.15);
  transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.ch-leave2-step:hover { transform: translateX(2px); border-color: rgba(255,95,31,0.30); box-shadow: 0 18px 28px -18px rgba(0,23,56,0.20); }
.ch-leave2-step-n {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 999px;
  background: linear-gradient(135deg, #FF5F1F, #E14E10);
  color: #fff;
  display: grid; place-items: center;
  font: 700 12.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: 0.04em;
  box-shadow: 0 6px 14px -6px rgba(255,95,31,0.45);
}
.ch-leave2-step b { display: block; font: 600 18px/1.25 var(--font-display); color: var(--ink); letter-spacing: -0.005em; }
.ch-leave2-step small { display: block; margin-top: 4px; font: 400 16px/1.55 var(--font-body); color: var(--ink-2); }

@media (max-width: 960px) {
  .ch-leave2-grid { grid-template-columns: 1fr; }
}

/* Dark step card variant (matches overview payroll dark bento) */
.ch-leave2-step-dark {
  background: linear-gradient(180deg, #001738 0%, #06213F 100%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ch-leave2-step-dark::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 55%; height: 60%;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,95,31,0.22), transparent 60%),
    repeating-linear-gradient(-30deg, transparent 0 22px, rgba(255,138,80,0.10) 22px 23px);
  mask-image: linear-gradient(225deg, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 80%);
  pointer-events: none;
}
.ch-leave2-step-dark > * { position: relative; z-index: 1; }
.ch-leave2-step-dark .ch-leave2-step-n { background: linear-gradient(135deg, #FF5F1F, #FF8A50); box-shadow: 0 6px 18px -6px rgba(255,95,31,0.6); }
.ch-leave2-step-dark b { color: #fff; }
.ch-leave2-step-dark small { color: rgba(255,255,255,0.65); }

/* Gantt-style team calendar */
.ch-gantt {
  margin-top: 4px;
  padding: 14px 0 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
  margin-right: -32px; margin-bottom: -30px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.ch-gantt-head { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: end; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 8px; padding-right: 14px; }
.ch-gantt-nav { display: flex; align-items: center; gap: 8px; color: #FF8A50; font: 600 12.5px/1 var(--font-display); }
.ch-gantt-nav b { color: #FF8A50; }
.ch-gantt-nav button { width: 20px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 0; color: rgba(255,255,255,0.60); font: 700 12px/1 var(--font-body); cursor: pointer; }
.ch-gantt-days { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.ch-gantt-day { text-align: center; color: rgba(255,255,255,0.70); }
.ch-gantt-day span { display: block; font: 700 12px/1 var(--font-display); color: #fff; }
.ch-gantt-day small { display: block; margin-top: 2px; font: 500 9.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: rgba(255,255,255,0.45); letter-spacing: 0.04em; }
.ch-gantt-body { display: flex; flex-direction: column; }
.ch-gantt-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; min-height: 34px; border-top: 1px solid rgba(255,255,255,0.04); }
.ch-gantt-row:first-child { border-top: 0; }
.ch-gantt-person { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.ch-gantt-avatar { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: #fff; font: 700 10px/1 var(--font-body); flex-shrink: 0; }
.ch-gantt-person b { font: 600 12px/1.2 var(--font-body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-gantt-lane { position: relative; height: 34px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.ch-gantt-cell { border-left: 1px solid rgba(255,255,255,0.04); }
.ch-gantt-bar {
  position: absolute; top: 6px; bottom: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,95,31,0.35), rgba(255,138,80,0.55));
  border: 1px solid rgba(255,138,80,0.45);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  gap: 8px;
  color: #fff;
  min-width: 0;
}
.ch-gantt-bar-t { font: 600 10.5px/1 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-gantt-bar-d { flex-shrink: 0; font: 700 10px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); padding: 3px 6px; border-radius: 999px; background: rgba(0,23,56,0.35); }
.ch-gantt-bar-short { padding: 0; width: auto !important; min-width: 24px; justify-content: center; }
.ch-gantt-bar-short .ch-gantt-bar-t { font: 700 10px/1 var(--font-mono, ui-monospace); }

/* Leave dashboard cropping: dashboard sits bottom-right with soft glow bg on top-left */
.ch-leave2-visual-crop {
  position: relative;
  display: grid;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFF3EA 0%, #FFE1CC 50%, #FFD1B5 100%);
  padding: 50px 0 0 50px;
  overflow: hidden;
  border: 1px solid rgba(255,95,31,0.14);
  box-shadow: 0 20px 50px -30px rgba(255,95,31,0.20);
}
.ch-leave2-visual-crop::before {
  content: "";
  position: absolute;
  top: -10%; left: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(255,255,255,0.70), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.ch-leave2-visual-crop .ov-stage {
  width: calc(100% + 50px);
  align-self: stretch;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}
.ch-leave2-visual-crop .ov-stage::before, .ch-leave2-visual-crop .ov-stage::after { display: none !important; }
.ch-leave2-visual-crop .ch-app {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0,23,56,0.10);
  border-radius: 20px 20px 20px 0;
  box-shadow: 0 30px 60px -40px rgba(0,23,56,0.25);
  height: 100%;
  min-height: 100%;
}
.ch-leave2-visual-crop .ov-stage { overflow: visible; }
.ch-leave2-visual-crop .ch-app-main { padding: 26px; }

/* Modernize inner balance cards */
.ch-leave2-visual-crop .ch-bal2 {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
  border: 1px solid rgba(0,23,56,0.06);
  border-radius: 14px;
  padding: 16px 16px 12px;
  box-shadow: 0 1px 3px rgba(0,23,56,0.04);
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.ch-leave2-visual-crop .ch-bal2:hover {
  transform: translateY(-2px);
  border-color: rgba(255,95,31,0.30);
  box-shadow: 0 12px 22px -14px rgba(0,23,56,0.18);
}
.ch-leave2-visual-crop .ch-bal2-t { font: 700 13px/1.25 var(--font-display); margin-bottom: 12px; }
.ch-leave2-visual-crop .ch-bal2-row { font-size: 12px; padding: 5px 0; }
.ch-leave2-visual-crop .ch-bal2-row b { font-size: 12.5px; }
.ch-leave2-visual-crop .ch-bal2-pill { font-size: 11.5px; padding: 4px 10px; font-weight: 700; }
.ch-leave2-visual-crop .ch-bal2-more { font-size: 12px; padding-top: 10px; margin-top: 10px; }
.ch-leave2-visual-crop .ch-bal2-underline { height: 3px; opacity: 0; }
.ch-leave2-visual-crop .ch-bal2:hover .ch-bal2-underline { opacity: 1; }
.ch-float-teamcal-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgba(0,23,56,0.06); margin-bottom: 10px; }
.ch-float-teamcal-h b { font: 600 12.5px/1.2 var(--font-display); color: var(--ink); }
.ch-float-teamcal-h small { font: 500 10.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink-3); letter-spacing: 0.04em; }
.ch-float-teamcal-list { display: flex; flex-direction: column; gap: 8px; }
.ch-tc-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; }
.ch-tc-avatar { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; color: #fff; font: 700 9px/1 var(--font-body); }
.ch-tc-body { grid-column: 2; grid-row: 1; }
.ch-tc-body b { display: block; font: 600 11.5px/1.2 var(--font-body); color: var(--ink); }
.ch-tc-body small { display: block; margin-top: 2px; font: 400 10px/1.2 var(--font-body); color: var(--ink-3); }
.ch-tc-bar {
  grid-column: 1 / -1; grid-row: 2;
  position: relative;
  height: 6px; border-radius: 999px;
  background: rgba(0,23,56,0.04);
  margin-top: 4px;
  overflow: hidden;
}
.ch-tc-bar i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #FFBD2E, #FF5F1F); border-radius: 999px; }
@keyframes ch-bal-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ch-bal2 {
  position: relative;
  flex: 0 0 180px;
  background: #fff;
  border: 1px solid rgba(0,23,56,0.08);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.ch-bal2:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgba(0,23,56,0.20); }
.ch-bal2-t { text-align: center; font: 600 12.5px/1.25 var(--font-display); color: var(--ink); margin-bottom: 10px; min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-bal-empty .ch-bal2-t { flex-shrink: 0; }
.ch-bal-empty .ch-bal2-empty { flex: 0 1 auto; }
.ch-bal2-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font: 400 11px/1.25 var(--font-body); color: var(--ink-2); }
.ch-bal2-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-bal2-row-bal { padding-top: 6px; gap: 6px; }
.ch-bal2-row-bal span { font-weight: 500; color: var(--ink); font-size: 10.5px; }
.ch-bal2-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; background: rgba(255,95,31,0.14); color: #C24810; font: 700 11px/1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-bal-blue   .ch-bal2-pill { background: rgba(20,151,186,0.14); color: #0D6F87; }
.ch-bal-teal   .ch-bal2-pill { background: rgba(20,151,186,0.14); color: #0D6F87; }
.ch-bal-green  .ch-bal2-pill { background: rgba(15,133,41,0.12); color: #0F8529; }
.ch-bal-amber  .ch-bal2-pill { background: rgba(255,189,46,0.20); color: #7A5300; }
.ch-bal2-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0 6px; gap: 6px; }
.ch-bal2-empty b { font: 700 30px/1 var(--font-display); color: var(--ink-3); letter-spacing: -0.02em; }
.ch-bal2-empty small { font: 400 10.5px/1.3 var(--font-body); color: var(--ink-3); text-align: center; }
.ch-bal2-more { display: block; text-align: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,23,56,0.06); font: 600 11.5px/1 var(--font-body); color: var(--ink-2); cursor: pointer; }
.ch-bal2-more:hover { color: #FF5F1F; }
.ch-bal2-underline { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #FF5F1F; opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); }
.ch-bal-blue  .ch-bal2-underline { background: #1497BA; }
.ch-bal-teal  .ch-bal2-underline { background: #28B7B7; }
.ch-bal-green .ch-bal2-underline { background: #0F8529; }
.ch-bal-amber .ch-bal2-underline { background: #FFBD2E; }
.ch-bal2:hover .ch-bal2-underline { opacity: 1; }

/* Requests */
.ch-app-reqs-h { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(0,23,56,0.06); margin-bottom: 10px; }
.ch-app-reqs-h b { font: 600 13px/1.2 var(--font-display); color: var(--ink); }
.ch-app-reqs-h b em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.ch-app-reqs-h a { font: 600 11.5px/1 var(--font-body); color: #FF5F1F; cursor: pointer; }
/* Requests — row card matching real app */
.ch-app-reqs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ch-app-req { min-width: 0; background: #fff; border: 1px solid rgba(0,23,56,0.08); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ch-app-req-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-app-req-head b { font: 600 12.5px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-app-req-ago { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/1 var(--font-body); color: var(--ink-3); white-space: nowrap; }
.ch-app-req-watch { display: inline-flex; align-items: center; color: var(--ink-3); }
.ch-app-req-watch svg { width: 12px; height: 12px; }
.ch-app-req-mid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ch-app-req-team { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(0,23,56,0.05); color: var(--ink-2); }
.ch-app-req-team svg { width: 12px; height: 12px; }
.ch-app-req-bar { height: 6px; border-radius: 999px; background: rgba(255,189,46,0.20); overflow: hidden; }
.ch-app-req-bar i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, #FFBD2E, #FF8A50); border-radius: 999px; }
.ch-app-req .ch-req-tag { font: 700 9.5px/1 var(--font-body); padding: 4px 8px; }
.ch-app-req-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ch-app-req-when { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--font-body); color: var(--ink-2); white-space: nowrap; }
.ch-app-req-when .ch-req-ic { width: 22px; height: 22px; background: rgba(255,95,31,0.10); color: #FF5F1F; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.ch-app-req-when .ch-req-ic svg { width: 12px; height: 12px; }
.ch-app-req-days { font: 700 10.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: #fff; background: #001738; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }

/* Floating glass accents */
.ch-float {
  position: absolute;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15,25,45,0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  color: #fff;
  display: flex; align-items: center; gap: 10px;
  animation: ch-float 6s ease-in-out infinite;
  z-index: 2;
}
.ch-float b { display: block; font: 600 12px/1.2 var(--font-display); color: #fff; }
.ch-float small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--font-body); color: rgba(255,255,255,0.75); }
.ch-float-toast { top: -52px; right: -30px; animation-delay: 0s; z-index: 3; }
.ch-float-toast .ch-float-dot { width: 8px; height: 8px; border-radius: 999px; background: #28C840; box-shadow: 0 0 0 4px rgba(40,200,64,0.20); flex-shrink: 0; }
.ch-float-badge { bottom: -26px; left: -30px; animation-delay: 2.5s; z-index: 3; }
.ch-float-badge-ic { width: 30px; height: 30px; border-radius: 10px; background: rgba(15,133,41,0.30); border: 1px solid rgba(40,200,64,0.55); color: #6EE38A; display: grid; place-items: center; }
.ch-float-badge-ic svg { width: 15px; height: 15px; }
.ch-float-badge small { color: rgba(255,255,255,0.75); font: 500 10px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes ch-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 1100px) {
  .ch-bal-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .ch-app { grid-template-columns: 1fr; }
  .ch-app-side { flex-direction: row; overflow-x: auto; }
  .ch-app-nav { flex-direction: row; }
  .ch-bal-strip, .ch-app-reqs { grid-template-columns: 1fr 1fr; }
}
.ch-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(15,133,41,0.10); border: 1px solid rgba(15,133,41,0.26);
  color: #0F8529; font: 600 11px/1 var(--font-body); white-space: nowrap;
}
.ch-status i { width: 6px; height: 6px; border-radius: 999px; background: #0F8529; box-shadow: 0 0 0 3px rgba(15,133,41,0.20); }
.ch-status-blue { background: rgba(20,151,186,0.10); border-color: rgba(20,151,186,0.28); color: #0D6F87; }
.ch-status-blue i { background: #1497BA; box-shadow: 0 0 0 3px rgba(20,151,186,0.20); }
.ch-status-amber { background: rgba(255,189,46,0.15); border-color: rgba(178,122,0,0.30); color: #7A5300; }
.ch-status-amber i { background: #FFBD2E; box-shadow: 0 0 0 3px rgba(255,189,46,0.25); }

.ch-bal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ch-bal {
  border-radius: 12px; padding: 12px 14px 10px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,23,56,0.08);
  display: flex; flex-direction: column; gap: 3px;
}
.ch-bal-t { font: 600 12.5px/1.2 var(--font-display); color: var(--ink); margin-bottom: 4px; }
.ch-bal-row { display: flex; justify-content: space-between; font: 400 11px/1.3 var(--font-body); color: var(--ink-2); }
.ch-bal-row b { font-weight: 600; color: var(--ink); }
.ch-bal-bal { font-size: 11.5px; }
.ch-bal-bal b { color: #FF5F1F; }
.ch-bal-bar { height: 3px; border-radius: 999px; background: rgba(0,23,56,0.08); margin-top: 6px; overflow: hidden; }
.ch-bal-bar i { display: block; height: 100%; border-radius: 999px; background: #FF5F1F; }
.ch-bal-blue   .ch-bal-bal b { color: #1497BA; } .ch-bal-blue   .ch-bal-bar i { background: #1497BA; }
.ch-bal-teal   .ch-bal-bal b { color: #0D6F87; } .ch-bal-teal   .ch-bal-bar i { background: #28B7B7; }
.ch-bal-green  .ch-bal-bal b { color: #0F8529; } .ch-bal-green  .ch-bal-bar i { background: #0F8529; }

.ch-req-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 6px; border-top: 1px solid rgba(0,23,56,0.06); margin-top: 4px; }
.ch-req-head b { font: 600 13px/1.2 var(--font-display); color: var(--ink); }
.ch-req-head small { font: 500 11px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink-3); letter-spacing: 0.02em; }
.ch-req-list { display: flex; flex-direction: column; gap: 6px; }
.ch-req { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,23,56,0.02); border: 1px solid rgba(0,23,56,0.05); }
.ch-req-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,95,31,0.10); color: #FF5F1F; }
.ch-req-ic svg { width: 14px; height: 14px; }
.ch-req-body b { display: block; font: 600 12px/1.2 var(--font-body); color: var(--ink); }
.ch-req-body small { display: block; margin-top: 2px; font: 400 10.5px/1.2 var(--font-body); color: var(--ink-2); }
.ch-req-days { font: 700 10.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink-2); background: rgba(0,23,56,0.06); padding: 4px 7px; border-radius: 999px; }
.ch-req-tag { font: 600 10px/1 var(--font-body); color: #7A5300; background: rgba(255,189,46,0.15); border: 1px solid rgba(178,122,0,0.25); padding: 4px 8px; border-radius: 999px; }

/* ── ESS + MSS dual card block ─────────────────────────── */
.ch-dual-sec { margin-top: clamp(60px, 6.8vw, 105px); display: flex; flex-direction: column; gap: 44px; }
.ch-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ch-dual-card {
  position: relative;
  padding: 32px 32px 34px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0,23,56,0.08);
  box-shadow: 0 30px 60px -40px rgba(0,23,56,0.18);
  transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
  display: flex; flex-direction: column; gap: 12px;
}
.ch-dual-card { position: relative; overflow: hidden; }
.ch-dual-card > *:not(.ch-dual-deco) { position: relative; z-index: 1; }
.ch-dual-deco { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; }

/* ESS decorations — faded payslip + calendar tiles + dots */
.ch-deco-payslip {
  position: absolute; top: 18px; right: -30px;
  width: 190px; padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(255,95,31,0.22);
  border-radius: 10px;
  transform: rotate(6deg);
  opacity: 0.55;
  filter: saturate(85%);
  box-shadow: 0 12px 22px -16px rgba(255,95,31,0.20);
}
.ch-deco-payslip-h { display: flex; gap: 6px; margin-bottom: 8px; }
.ch-deco-payslip-h span { display: block; height: 5px; border-radius: 3px; background: rgba(0,23,56,0.10); }
.ch-deco-payslip-h span:first-child { width: 60px; background: rgba(255,95,31,0.30); }
.ch-deco-payslip-h span:last-child  { width: 26px; }
.ch-deco-payslip-net { padding: 8px 10px; border-radius: 8px; background: linear-gradient(135deg, rgba(0,23,56,0.90), rgba(26,62,109,0.90)); color: #fff; margin-bottom: 8px; }
.ch-deco-payslip-net b { display: block; font: 700 12px/1 var(--font-mono, ui-monospace); }
.ch-deco-payslip-net small { display: block; margin-top: 3px; font: 400 9px/1 var(--font-body); color: rgba(255,255,255,0.60); }
.ch-deco-payslip-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-top: 1px dashed rgba(0,23,56,0.10); }
.ch-deco-payslip-row span { display: block; width: 60px; height: 4px; border-radius: 2px; background: rgba(0,23,56,0.10); }
.ch-deco-payslip-row i { font-style: normal; font: 600 9.5px/1 var(--font-mono, ui-monospace); color: rgba(0,23,56,0.35); }

.ch-deco-cal {
  position: absolute; bottom: -30px; right: 20px;
  width: 130px; padding: 10px;
  background: #fff;
  border: 1px solid rgba(255,95,31,0.20);
  border-radius: 10px;
  transform: rotate(-8deg);
  opacity: 0.45;
  box-shadow: 0 12px 22px -16px rgba(255,95,31,0.20);
}
.ch-deco-cal-h { display: flex; gap: 4px; margin-bottom: 8px; }
.ch-deco-cal-h span { display: block; height: 4px; border-radius: 2px; background: rgba(255,95,31,0.30); flex: 1; }
.ch-deco-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ch-deco-cal-grid span { aspect-ratio: 1; border-radius: 3px; background: rgba(0,23,56,0.06); }
.ch-deco-cal-grid span.on { background: #FF5F1F; }

.ch-deco-dot { position: absolute; border-radius: 999px; opacity: 0.4; }
.ch-deco-dot-1 { top: 30%; right: 50%; width: 8px; height: 8px; background: rgba(255,95,31,0.55); }
.ch-deco-dot-2 { top: 65%; right: 25%; width: 4px; height: 4px; background: rgba(255,95,31,0.60); }
.ch-deco-dot-3 { top: 80%; right: 5%; width: 6px; height: 6px; background: rgba(255,95,31,0.35); }

/* MSS decorations — approval toast + team avatars + org lines */
.ch-deco-approve {
  position: absolute; top: 22px; right: 20px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(15,133,41,0.30);
  border-radius: 12px;
  transform: rotate(-4deg);
  opacity: 0.55;
  box-shadow: 0 10px 20px -14px rgba(0,23,56,0.20);
}
.ch-deco-approve-ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(15,133,41,0.14); color: #0F8529; display: grid; place-items: center; }
.ch-deco-approve-ic svg { width: 14px; height: 14px; }
.ch-deco-approve b { display: block; font: 600 11px/1.2 var(--font-body); color: var(--ink); }
.ch-deco-approve small { display: block; margin-top: 2px; font: 400 9.5px/1 var(--font-body); color: var(--ink-3); }

.ch-deco-team {
  position: absolute; bottom: 40px; right: -10px;
  display: inline-flex;
  transform: rotate(4deg);
  opacity: 0.50;
}
.ch-deco-avatar {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  color: #fff; font: 700 10px/1 var(--font-body);
  border: 2px solid #fff;
  margin-left: -8px;
  box-shadow: 0 3px 8px -3px rgba(0,23,56,0.20);
}
.ch-deco-avatar-more { background: rgba(0,23,56,0.10); color: var(--ink-2); }

.ch-deco-orgline {
  position: absolute; bottom: -20px; right: 40%;
  width: 120px; height: 60px;
  color: rgba(26,62,109,0.35);
  opacity: 0.55;
  transform: rotate(-6deg);
}
.ch-deco-orgline svg { width: 100%; height: 100%; }

/* Inner element transitions for hover-driven motion */
.ch-deco-payslip, .ch-deco-cal, .ch-deco-approve, .ch-deco-team, .ch-deco-orgline, .ch-deco-dot, .ch-dual-ic { transition: transform 520ms cubic-bezier(.22,1,.36,1), opacity 420ms ease; }
.ch-dual-card:hover .ch-deco-payslip { transform: rotate(2deg) translate(-14px, -6px); opacity: 0.85; }
.ch-dual-card:hover .ch-deco-cal { transform: rotate(-2deg) translate(-10px, -14px); opacity: 0.75; }
.ch-dual-card:hover .ch-deco-dot-1 { transform: translate(-6px, -4px) scale(1.4); }
.ch-dual-card:hover .ch-deco-dot-2 { transform: translate(-10px, 4px) scale(1.6); }
.ch-dual-card:hover .ch-deco-dot-3 { transform: translate(-4px, -8px) scale(1.3); }
.ch-dual-card:hover .ch-deco-approve { transform: rotate(0deg) translate(-8px, -4px); opacity: 0.95; }
.ch-dual-card:hover .ch-deco-team { transform: rotate(0deg) translate(-14px, -6px); opacity: 0.85; }
.ch-dual-card:hover .ch-deco-orgline { transform: rotate(-2deg) translate(0, -8px); opacity: 0.80; }
.ch-dual-card:hover .ch-dual-ic { transform: translateY(-3px) rotate(-4deg); }
.ch-dual-card:hover .ch-deco-avatar:nth-child(1) { transform: translateY(-2px); }
.ch-dual-card:hover .ch-deco-avatar:nth-child(2) { transform: translateY(-4px); }
.ch-dual-card:hover .ch-deco-avatar:nth-child(3) { transform: translateY(-3px); }
.ch-dual-card:hover .ch-deco-avatar:nth-child(4) { transform: translateY(-5px); }
.ch-dual-card:hover .ch-deco-avatar:nth-child(5) { transform: translateY(-2px); }
.ch-deco-avatar { transition: transform 480ms cubic-bezier(.22,1,.36,1); }

.ch-dual-card:hover { transform: translateY(-3px); border-color: rgba(255,95,31,0.30); box-shadow: 0 40px 70px -40px rgba(0,23,56,0.22); }
.ch-dual-ess { background: linear-gradient(180deg, #FFF9F6 0%, #FFFFFF 40%); }
.ch-dual-mss { background: linear-gradient(180deg, #F0F3F8 0%, #FFFFFF 40%); }
.ch-dual-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #FF5F1F; border: 1px solid rgba(255,95,31,0.22); box-shadow: 0 6px 14px -8px rgba(255,95,31,0.30); }
.ch-dual-mss .ch-dual-ic { color: #1A3E6D; border-color: rgba(26,62,109,0.22); box-shadow: 0 6px 14px -8px rgba(26,62,109,0.30); }
.ch-dual-ic svg { width: 22px; height: 22px; }
.ch-dual-tag { font: 700 10.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: #FF5F1F; }
.ch-dual-mss .ch-dual-tag { color: #1A3E6D; }
.ch-dual-card h3 { margin: 4px 0 0; font: 600 24px/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.ch-dual-card p { margin: 0; font: 400 15px/1.6 var(--font-body); color: var(--ink-2); }
.ch-dual-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ch-dual-list li { display: flex; gap: 12px; align-items: flex-start; font: 400 14.5px/1.5 var(--font-body); color: var(--ink); }
.ch-tick { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: #0F8529; margin-top: 2px; }
.ch-tick svg { width: 16px; height: 16px; }

@media (max-width: 900px) { .ch-dual-grid { grid-template-columns: 1fr; } }

/* ── Shared split section styling ──────────────────────── */
.ch-split-sec { margin-top: clamp(60px,6.8vw,105px); }
.ch-split-sec .display-m em { color: #FF5F1F; font-style: italic; }
.ch-leave-sec .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) !important; gap: clamp(40px, 5vw, 72px) !important; }
.ch-leave-sec .split .split-media { max-width: none !important; width: 100% !important; }
.ch-leave-sec .split .split-media .ov-stage { padding: 14px !important; }
#timesheet .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: clamp(36px, 4vw, 60px) !important; }
#timesheet .split .split-media { max-width: none !important; width: 100% !important; }
#benefits .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: clamp(36px, 4vw, 60px) !important; }
#benefits .split .split-media { max-width: none !important; width: 100% !important; }

/* Benefits · pending card refined – matches timesheet card style */
.ch-ben-pending { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.ch-ben-card { display: flex !important; flex-direction: column; gap: 10px; padding: 14px !important; background: #fff !important; border: 1px solid rgba(0,23,56,0.08) !important; border-radius: 12px !important; overflow: hidden; transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); position: relative; }
.ch-ben-card:hover { transform: translateY(-2px); border-color: rgba(255,95,31,0.28); box-shadow: 0 14px 26px -18px rgba(0,23,56,0.20); }
.ch-ben-card-h { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: flex-start; gap: 10px; padding: 0; }
.ch-ben-card-hbody { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ch-ben-card-title { font: 600 12.5px/1.35 var(--font-body); color: var(--ink); }
.ch-ben-card .ch-ben-ic { width: 32px; height: 32px; border-radius: 9px; transition: transform var(--motion-fast) var(--ease-standard); }
.ch-ben-card:hover .ch-ben-ic { transform: rotate(-6deg) scale(1.06); }
.ch-ben-card-meta { display: flex; justify-content: flex-start !important; align-items: center; gap: 8px; padding: 4px 0 0 46px !important; border-top: 0; background: transparent; text-align: left; }
.ch-ben-meta-l { min-width: 0; display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; justify-content: flex-start; }
.ch-ben-meta-l small { font: 600 10px/1.1 var(--font-body); color: var(--ink-3); letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0.85; }
.ch-ben-meta-l span { font: 700 12px/1.1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-ben-ago { flex-shrink: 0; font: 500 10.5px/1 var(--font-body); color: var(--ink-2); background: rgba(0,23,56,0.03); border: 1px solid rgba(0,23,56,0.06); padding: 5px 10px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ch-ben-ago::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #FFBD2E; box-shadow: 0 0 0 3px rgba(255,189,46,0.20); animation: ch-pulse 2s ease-in-out infinite; }
@keyframes ch-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }

.ch-ben-sub b i { font-style: normal; font-weight: 700; color: #FF5F1F; background: rgba(255,95,31,0.10); padding: 2px 8px; border-radius: 999px; margin-left: 6px; font-size: 11px; }

/* Approved rows – matches timesheet row style */
.ch-ben-list { display: flex; flex-direction: column; gap: 6px; }
.ch-ben-row { background: #fff !important; border: 1px solid rgba(0,23,56,0.08) !important; border-radius: 12px !important; transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.ch-ben-row:hover { transform: translateX(2px); border-color: rgba(15,133,41,0.28); }
.ch-ben-tag-ok { display: inline-flex; align-items: center; gap: 5px; }
.ch-ben-tag-ok::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #0F8529; box-shadow: 0 0 0 3px rgba(15,133,41,0.20); }
.ch-bullets { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ch-bullets li { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.55 var(--font-body); color: var(--ink); }

/* ── Leave calendar mock ───────────────────────────────── */
.ch-cal {
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  padding: 22px !important;
  border-radius: 16px !important;
}
.ch-cal-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(0,23,56,0.06); margin-bottom: 14px; }
.ch-cal-head b { display: block; font: 600 14px/1.2 var(--font-display); color: var(--ink); }
.ch-cal-head small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-body); color: var(--ink-2); }
.ch-cal-legend { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-body); color: var(--ink-2); }
.ch-cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ch-cal-legend .lg-leave { background: #FF5F1F; }
.ch-cal-legend .lg-off { background: rgba(0,23,56,0.10); }
.ch-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ch-cal-days span { text-align: center; font: 700 10.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink-3); letter-spacing: 0.06em; padding: 6px 0; }
.ch-cal-cells { margin-top: 6px; }
.ch-cal-c { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,23,56,0.06); font: 500 12px/1 var(--font-body); color: var(--ink); }
.ch-cal-empty { background: transparent; border: 0; }
.ch-cal-c.is-off { background: rgba(0,23,56,0.05); color: var(--ink-3); border-color: transparent; }
.ch-cal-c.is-leave { background: linear-gradient(180deg, #FF5F1F, #E14E10); color: #fff; border-color: rgba(255,95,31,0.5); font-weight: 700; box-shadow: 0 4px 10px -6px rgba(255,95,31,0.45); }
.ch-cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,23,56,0.06); }
.ch-cal-tot b { display: block; font: 600 13px/1.2 var(--font-display); color: var(--ink); }
.ch-cal-tot small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--font-body); color: var(--ink-2); }
.ch-cal-people { display: inline-flex; align-items: center; }
.ch-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: #fff; font: 700 10px/1 var(--font-body); border: 2px solid #fff; margin-left: -6px; box-shadow: 0 2px 6px -2px rgba(0,23,56,0.20); }
.ch-avatar-more { background: rgba(0,23,56,0.06); color: var(--ink-2); }

/* ── Timesheet mock ────────────────────────────────────── */
.ch-ts {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 16px !important;
  padding: 18px !important;
}
.ch-ts-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(0,23,56,0.06); }
.ch-ts-head b { display: block; font: 700 15px/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.005em; }
.ch-ts-head small { display: block; margin-top: 4px; font: 400 12px/1.3 var(--font-body); color: var(--ink-2); }

/* Summary cards row */
.ch-ts-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ch-ts-card { background: #fff; border: 1px solid rgba(0,23,56,0.08); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ch-ts-card-t { font: 700 12px/1.2 var(--font-display); color: var(--ink); }

.ch-ts-appr { display: flex; flex-direction: column; gap: 8px; }
.ch-ts-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 700 10px/1.2 var(--font-body); align-self: flex-start; letter-spacing: 0.02em; }
.ch-ts-badge-blue { background: rgba(0,122,164,0.12); color: #007AA4; }
.ch-ts-appr-row { display: flex; align-items: center; gap: 8px; }
.ch-ts-appr-row b { display: block; font: 600 11px/1.2 var(--font-body); color: var(--ink); }
.ch-ts-appr-row small { display: block; margin-top: 2px; font: 400 10px/1.2 var(--font-body); color: var(--ink-3); }
.ch-ts-av { flex-shrink: 0; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; font: 700 9px/1 var(--font-body); color: #fff; }
.ch-ts-av-a { background: linear-gradient(135deg,#FF5F1F,#FF8A50); }
.ch-ts-av-b { background: linear-gradient(135deg,#1497BA,#0D6F87); }

.ch-ts-rep { display: flex; flex-direction: column; gap: 4px; }
.ch-ts-rep-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font: 400 11.5px/1.2 var(--font-body); color: var(--ink-2); }
.ch-ts-rep-row span i { font-style: normal; color: var(--ink-3); }
.ch-ts-rep-row b { font: 700 12px/1 var(--font-mono, ui-monospace); color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-ts-rep-tot { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(0,23,56,0.06); }
.ch-ts-rep-tot b { background: #001738; color: #fff; padding: 4px 10px; border-radius: 8px; }

.ch-ts-act { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ch-ts-act li { display: flex; gap: 8px; align-items: flex-start; }
.ch-ts-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; margin-top: 4px; }
.ch-ts-dot-g { background: #0F8529; box-shadow: 0 0 0 3px rgba(15,133,41,0.14); }
.ch-ts-dot-b { background: #007AA4; box-shadow: 0 0 0 3px rgba(0,122,164,0.14); }
.ch-ts-act b { display: block; font: 600 11px/1.3 var(--font-body); color: var(--ink); }
.ch-ts-act em { font-style: normal; font-weight: 700; }
.ch-ts-act em.ok { color: #0F8529; }
.ch-ts-act em.inf { color: #007AA4; }
.ch-ts-act small { display: block; margin-top: 2px; font: 400 10px/1.2 var(--font-body); color: var(--ink-3); }

/* Chart */
.ch-ts-chartwrap { background: #fff; border: 1px solid rgba(0,23,56,0.08); border-radius: 12px; padding: 14px; }
.ch-ts-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ch-ts-chart-head b { font: 700 12px/1.2 var(--font-display); color: var(--ink); }
.ch-ts-legend { display: flex; align-items: center; gap: 12px; font: 500 10.5px/1 var(--font-body); color: var(--ink-2); }
.ch-ts-legend span { display: inline-flex; align-items: center; }
.ch-ts-legend .lg { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 5px; }
.ch-ts-legend .lg-r { background: #001738; }
.ch-ts-legend .lg-o { background: #FFBD2E; }
.ch-ts-legend .lg-l { background: #D22A2A; }

.ch-ts-chart2 { display: grid; grid-template-columns: 24px 1fr; gap: 6px; height: 190px; }
.ch-ts-yaxis { display: flex; flex-direction: column; justify-content: space-between; font: 500 9.5px/1 var(--font-body); color: var(--ink-3); text-align: right; padding-right: 4px; padding-bottom: 38px; }
.ch-ts-plot { position: relative; }
.ch-ts-grid { position: absolute; inset: 0 0 38px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.ch-ts-grid i { display: block; height: 1px; background: rgba(0,23,56,0.06); }
.ch-ts-bars { position: absolute; inset: 0 0 38px 0; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; }
.ch-ts-col { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 0; position: relative; }
.ch-ts-stack { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.ch-ts-seg { width: 100%; min-height: 2px; transition: transform var(--motion-fast) var(--ease-standard); }
.ch-ts-seg + .ch-ts-seg { margin-top: 0; }
.ch-ts-o { background: linear-gradient(180deg, #FFCF52, #FFA000); border-radius: 3px 3px 0 0; }
.ch-ts-r { background: linear-gradient(180deg, #1A3E6D, #001738); }
.ch-ts-stack .ch-ts-seg:first-child { border-radius: 3px 3px 0 0; }
.ch-ts-stack .ch-ts-seg:only-child { border-radius: 3px 3px 0 0; }
.ch-ts-l { background: linear-gradient(180deg, #E5453F, #B21F1F); border-radius: 3px 3px 0 0; }
.ch-ts-col small { position: absolute; bottom: -34px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ch-ts-col small span { font: 600 10px/1 var(--font-body); color: var(--ink); }
.ch-ts-col small i { font-style: normal; font: 500 9.5px/1 var(--font-mono, ui-monospace); color: var(--ink-3); }
.ch-ts-col:has(.ch-ts-l) small span, .ch-ts-col:has(.ch-ts-l) small i { color: var(--ink-3); }
.ch-ts-col:hover .ch-ts-seg { transform: scaleY(1.03); transform-origin: bottom; }

/* ── Benefits mock ─────────────────────────────────────── */
.ch-ben {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  padding: 22px !important;
  border-radius: 16px !important;
}
.ch-ben-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(0,23,56,0.06); }
.ch-ben-head b { display: block; font: 600 14px/1.2 var(--font-display); color: var(--ink); }
.ch-ben-head small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-body); color: var(--ink-2); }
.ch-ben-pending { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.ch-ben-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.95); border: 1px solid rgba(0,23,56,0.06); }
.ch-ben-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,95,31,0.10); color: #FF5F1F; border: 1px solid rgba(255,95,31,0.20); }
.ch-ben-ic svg { width: 15px; height: 15px; }
.ch-ben-body b { display: block; font: 600 12.5px/1.25 var(--font-body); color: var(--ink); }
.ch-ben-body small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--font-body); color: var(--ink-3); }
.ch-ben-tag { font: 600 10px/1 var(--font-body); color: #7A5300; background: rgba(255,189,46,0.15); border: 1px solid rgba(178,122,0,0.28); padding: 4px 8px; border-radius: 999px; }
.ch-ben-tag-ok { color: #0F8529; background: rgba(15,133,41,0.10); border-color: rgba(15,133,41,0.24); }
.ch-ben-sub { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 10px; margin-bottom: 4px; border-top: 0; }
.ch-ben-sub b { font: 600 13px/1.2 var(--font-display); color: var(--ink); }
.ch-ben-sub small { font: 500 11px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink-3); letter-spacing: 0.02em; }
.ch-ben-list { display: flex; flex-direction: column; gap: 6px; }
.ch-ben-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(0,23,56,0.02); border: 1px solid rgba(0,23,56,0.05); }
.ch-ben-ref { font: 700 10.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: #FF5F1F; }
.ch-ben-rowbody b { display: block; font: 600 12.5px/1.2 var(--font-body); color: var(--ink); }
.ch-ben-rowbody small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--font-body); color: var(--ink-3); }
.ch-ben-amt { font: 700 12px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--ink); }

/* ── Payslips section ──────────────────────────────────── */
.ch-ps-sec { margin-top: clamp(60px,6.8vw,105px); display: flex; flex-direction: column; gap: 40px; }
.ch-ps-stage { max-width: 900px; width: 100%; margin: 0 auto; }
.ch-payslip {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  padding: 26px !important;
  border-radius: 18px !important;
}
.ch-payslip-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid rgba(0,23,56,0.06); margin-bottom: 18px; }
.ch-payslip-head b { display: block; font: 600 15px/1.2 var(--font-display); color: var(--ink); }
.ch-payslip-head small { display: block; margin-top: 4px; font: 400 12.5px/1.3 var(--font-body); color: var(--ink-2); }
.ch-payslip-net { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 14px; background: linear-gradient(135deg, #001738, #1A3E6D); color: #fff; margin-bottom: 18px; }
.ch-payslip-net small { display: block; font: 500 11px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); color: rgba(255,255,255,0.65); letter-spacing: 0.06em; text-transform: uppercase; }
.ch-payslip-net b { display: block; margin-top: 6px; font: 700 26px/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.ch-payslip-cta { display: flex; gap: 10px; }
.ch-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #FF5F1F; color: #fff; border: 0; font: 600 12.5px/1 var(--font-body); cursor: pointer; }
.ch-btn:hover { background: #E14E10; }
.ch-btn-ghost { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); }
.ch-btn-ghost:hover { background: rgba(255,255,255,0.18); }
.ch-btn-ic { display: inline-flex; align-items: center; }
.ch-btn-ic svg { width: 14px; height: 14px; }
.ch-payslip-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ch-payslip-row { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,23,56,0.05); font: 500 13.5px/1 var(--font-body); }
.ch-payslip-row span { color: var(--ink-2); }
.ch-payslip-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-payslip-row b.is-neg { color: #D22A2A; }
.ch-payslip-chart { padding: 16px; border-radius: 12px; background: rgba(0,23,56,0.03); }
.ch-payslip-chart-t { display: flex; justify-content: space-between; margin-bottom: 12px; }
.ch-payslip-chart-t b { font: 600 12.5px/1.2 var(--font-display); color: var(--ink); }
.ch-payslip-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; min-height: 60px; }
.ch-psb { display: flex; align-items: end; height: 60px; }
.ch-psb i { width: 100%; background: linear-gradient(180deg, #FF5F1F, #E14E10); border-radius: 4px 4px 2px 2px; }

/* Payslip · richer layout */
.ch-payslip-head-l { display: flex; align-items: center; gap: 12px; }
.ch-payslip-av { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #FF5F1F, #FF8A50); color: #fff; font: 700 13px/1 var(--font-body); box-shadow: 0 6px 14px -6px rgba(255,95,31,0.45); }
.ch-payslip-head small em { font-style: normal; color: var(--ink-3); }

.ch-payslip-net-l small { display: block; font: 500 11px/1 var(--font-mono, ui-monospace); color: rgba(255,255,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.ch-payslip-net-l b { display: block; margin-top: 6px; font: 700 28px/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ch-payslip-net-l em { display: block; margin-top: 6px; font-style: normal; font: 400 11px/1.2 var(--font-body); color: rgba(255,255,255,0.55); }

.ch-payslip-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 18px; }
.ch-payslip-sum { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,23,56,0.06); }
.ch-payslip-sum small { display: block; font: 500 10px/1 var(--font-mono, ui-monospace); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.ch-payslip-sum b { display: block; margin-top: 6px; font: 700 17px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-payslip-sum b.is-neg { color: #D22A2A; }
.ch-payslip-sum-net { background: linear-gradient(135deg, rgba(15,133,41,0.10), rgba(15,133,41,0.04)); border-color: rgba(15,133,41,0.28); }
.ch-payslip-sum-net b { color: #0F8529; }

.ch-payslip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.ch-payslip-col { padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,23,56,0.06); display: flex; flex-direction: column; gap: 6px; }
.ch-payslip-col-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(0,23,56,0.06); }
.ch-payslip-col-h b { font: 700 12.5px/1.2 var(--font-display); color: var(--ink); }
.ch-payslip-col-h span { font: 600 11.5px/1 var(--font-mono, ui-monospace); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ch-payslip-col-h span.is-neg { color: #D22A2A; }
.ch-payslip-col .ch-payslip-row { background: transparent; border: 0; padding: 6px 0; font-size: 12.5px; }

/* Dual-bar chart */
.ch-payslip-chart-legend { display: inline-flex; gap: 10px; font: 500 10.5px/1 var(--font-body); color: var(--ink-2); }
.ch-payslip-chart-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 4px; vertical-align: middle; }
.ch-payslip-chart-legend .lg-gross { background: #FF5F1F; }
.ch-payslip-chart-legend .lg-net { background: #001738; }
.ch-payslip-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; min-height: 90px; }
.ch-psb { position: relative; display: flex; align-items: end; justify-content: center; gap: 4px; height: 90px; padding-bottom: 16px; }
.ch-psb i { width: 8px; border-radius: 3px 3px 0 0; }
.ch-psb-g { background: linear-gradient(180deg, #FF8A50, #FF5F1F); }
.ch-psb-n { background: linear-gradient(180deg, #1A3E6D, #001738); }
.ch-psb small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 500 9.5px/1 var(--font-body); color: var(--ink-3); }

.ch-payslip-ytd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,23,56,0.06); }
.ch-payslip-ytd > div { text-align: left; }
.ch-payslip-ytd small { display: block; font: 500 9.5px/1 var(--font-mono, ui-monospace); color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.ch-payslip-ytd b { display: block; margin-top: 4px; font: 700 14px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-payslip-ytd b.is-neg { color: #D22A2A; }

/* Mini payslip inside the "Any language" dark step card — cropped bleed */
.ch-mini-ps-crop { position: relative; margin: 12px -22px -22px 0; overflow: hidden; max-height: 210px; }
.ch-mini-ps { padding: 12px 14px 14px; border-radius: 14px 0 0 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-right: 0; border-bottom: 0; backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); animation: chMiniIn 320ms var(--ease-standard); min-width: 340px; }
.ch-mini-ps.is-rtl { text-align: right; direction: rtl; }
.ch-mini-ps-h { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.ch-mini-ps-flag { font-size: 22px; line-height: 1; }
.ch-mini-ps-h b { display: block; font: 600 13px/1.2 var(--font-display); color: #fff; }
.ch-mini-ps-h small { display: block; margin-top: 3px; font: 400 11px/1.2 var(--font-body); color: rgba(255,255,255,0.60); }
.ch-mini-ps-lang { font: 700 10.5px/1 var(--font-mono, ui-monospace); color: #FFD9C4; background: rgba(255,95,31,0.20); border: 1px solid rgba(255,95,31,0.45); padding: 5px 10px; border-radius: 999px; letter-spacing: 0.06em; }
.ch-mini-ps-net { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,95,31,0.22), rgba(255,95,31,0.06)); border: 1px solid rgba(255,95,31,0.32); }
.ch-mini-ps-net small { font: 600 10.5px/1 var(--font-mono, ui-monospace); color: rgba(255,255,255,0.85); letter-spacing: 0.10em; text-transform: uppercase; }
.ch-mini-ps-net b { font: 700 17px/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ch-mini-ps-rows { display: flex; flex-direction: column; gap: 2px; }
.ch-mini-ps-rows > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; font: 500 12.5px/1 var(--font-body); color: rgba(255,255,255,0.82); }
.ch-mini-ps-rows > div + div { border-top: 1px solid rgba(255,255,255,0.06); }
.ch-mini-ps-rows b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ch-mini-ps-rows b.is-neg { color: #FFB8B8; }
@keyframes chMiniIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ch-payslip-locale { display: inline-flex; gap: 6px; align-items: center; }
.ch-payslip-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(0,23,56,0.06); font: 600 10.5px/1 var(--font-mono, ui-monospace); color: var(--ink); letter-spacing: 0.04em; transition: transform 320ms var(--ease-standard), background 320ms var(--ease-standard); }
.ch-payslip-chip-cur { background: linear-gradient(135deg, rgba(255,95,31,0.18), rgba(255,95,31,0.08)); color: #C24710; border: 1px solid rgba(255,95,31,0.28); }
.ch-payslip.is-rtl .ch-payslip-head-l { flex-direction: row-reverse; }
.ch-payslip.is-rtl .ch-payslip-net, .ch-payslip.is-rtl .ch-payslip-summary, .ch-payslip.is-rtl .ch-payslip-cols, .ch-payslip.is-rtl .ch-payslip-ytd { direction: rtl; }
.ch-payslip { transition: opacity 320ms var(--ease-standard); }

.ch-payslip-sec .ch-leave2-grid { direction: rtl; }
.ch-payslip-sec .ch-leave2-grid > * { direction: ltr; }
.ch-payslip-sec .ch-mini-ps-crop { margin: 12px 0 -22px -22px; }
.ch-payslip-sec .ch-mini-ps { border-radius: 0 14px 0 0; border: 1px solid rgba(255,255,255,0.10); border-left: 0; border-bottom: 0; }
/* Payslip section uses leave2 grid — override its cream orange to mint */
.ch-payslip-sec .ch-leave2-visual-crop { background: linear-gradient(135deg, rgba(20,151,186,0.20), rgba(255,255,255,0.65) 60%) !important; box-shadow: 0 20px 50px -30px rgba(20,151,186,0.22) !important; max-height: 560px; overflow: hidden; }
.ch-payslip-sec .ch-leave2-visual-crop::before { background: radial-gradient(circle at 30% 30%, rgba(20,151,186,0.20), transparent 65%) !important; }
.ch-payslip-sec .ch-leave2-visual-crop .ov-stage { overflow: hidden !important; }
.ch-payslip-sec .ch-payslip { max-height: none; }
.ch-payslip-sec .ch-payslip-ytd { display: none; }
/* Only 2 steps here (no "Any device" step to balance against), so let the
   steps column size to its own content instead of stretching via grid
   align-items:stretch to match the much taller full payslip mockup —
   otherwise the dark "Any language" card inflates past its cropped
   preview, leaving a large empty gap below it. */
.ch-payslip-sec .ch-leave2-steps { align-self: start; }
.ch-payslip-sec .ch-leave2-step-lg { flex: none; min-height: 0; }
/* With only 2 steps (no "Any device" step), the mini payslip card's
   default 210px crop (calibrated for a 3-step column matching the tall
   full payslip mockup) cuts off its last 2 rows — show it in full instead. */
.ch-payslip-sec .ch-mini-ps-crop { max-height: none; overflow: visible; }
@media (max-width: 760px) {
  .ch-payslip-cols { grid-template-columns: 1fr; }
  .ch-payslip-summary, .ch-payslip-ytd { grid-template-columns: 1fr 1fr; }
}

.ch-ps-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ch-ps-chip { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid rgba(0,23,56,0.08); }
.ch-ps-chip-i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,95,31,0.09); color: #FF5F1F; border: 1px solid rgba(255,95,31,0.20); }
.ch-ps-chip-i svg { width: 18px; height: 18px; }
.ch-ps-chip b { display: block; font: 600 14.5px/1.25 var(--font-display); color: var(--ink); }
.ch-ps-chip small { display: block; margin-top: 3px; font: 400 13px/1.5 var(--font-body); color: var(--ink-2); }

@media (max-width: 900px) {
  .ch-ben-pending { grid-template-columns: 1fr; }
  .ch-ps-chips { grid-template-columns: 1fr; }
  .ch-ts-cards { grid-template-columns: 1fr; }
  .ch-ts-chart2 { grid-template-columns: 22px 1fr; }
  .ch-bal-grid { grid-template-columns: 1fr; }
}


/* ── FORCEFUL mobile responsive for CoreHR page ── */
@media (max-width: 900px) {
  /* Hero: force stack on mobile */
  .ovh.ed-hero-dark:has(.ch-hero-wrap) .ovh-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ch-hero-wrap { max-width: 100% !important; margin-left: 0 !important; }
  /* Hide all decorative floating cards */
  .ch-float, .ch-float-toast, .ch-float-badge, .ch-float-teamcal, .ch-float-payslip, .ch-leave-float, .ch-payslip-float { display: none !important; }

  html, body { overflow-x: hidden !important; }
  [class*="ch-"] { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }

  /* All CoreHR splits stack to single column */
  .ch-leave-sec .split,
  #timesheet .split,
  #benefits .split,
  .ch-payslip-sec .split,
  .ch-ps-sec .split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ch-leave-sec .split-media,
  #timesheet .split-media,
  #benefits .split-media,
  .ch-payslip-sec .split-media { max-width: 100% !important; width: 100% !important; margin: 0 !important; }

  /* Leave dashboard cropping card: keep inside container */
  .ch-leave2-visual-crop { padding: 12px !important; }
  .ch-leave2-visual-crop .ov-stage {
    width: 100% !important; align-self: stretch !important;
    margin: 0 !important;
    transform: none !important;
  }
  .ch-leave2-visual-crop .ch-app-main { padding: 12px !important; }

  /* Leave balance cards: 2 columns on mobile */
  .ch-bal-strip, .ch-leave2-visual-crop .ch-bal-strip { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Payslip inner grids stack */
  .ch-payslip { padding: 16px !important; }
  .ch-payslip-summary, .ch-payslip-ytd { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ch-ps-stage { max-width: 100% !important; }

  /* Timesheet dashboard card: full width */
  .ch-app { grid-template-columns: 1fr !important; }
  .ch-app-side { display: none !important; }
  .ch-app-main { padding: 14px !important; }

  /* Benefits pending cards: stack in one column and constrain width */
  .ch-bnf-pending { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Hide heavy floating cards on mobile */
  .ch-float-teamcal, .ch-float-payslip, .ch-leave-float, .ch-payslip-float { display: none !important; }

  /* Text wrap protection */
  .ch-leave2-step b, .ch-leave2-step small,
  .ch-payslip-head b, .ch-payslip-head small,
  .ch-app-main b, .ch-app-main small,
  .ch-bal2-t, .ch-bal2-row { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

  /* Overview timesheet card / My requests card don't overflow */
  .ov-stage { padding: 8px !important; }
  .ov-stage-inner { padding: 0 !important; }
}
@media (max-width: 560px) {
  .ch-bal-strip, .ch-leave2-visual-crop .ch-bal-strip { grid-template-columns: 1fr !important; }
  .ch-payslip { padding: 14px !important; }
}



/* On mobile only, hide the 3rd request card */
@media (max-width: 900px) {
  .ch-app-reqs > *:nth-child(n+3) { display: none !important; }
}


/* Hide Maternity Leave card on mobile (2nd item in balances) */
@media (max-width: 900px) {
  .ch-bal-track > *:nth-child(2),
  .ch-bal-strip > *:nth-child(2),
  .ch-leave2-visual-crop .ch-bal-track > *:nth-child(2),
  .ch-leave2-visual-crop .ch-bal-strip > *:nth-child(2) { display: none !important; }
}


/* Text-first on mobile in every split section (heading + description above the UI card) */
@media (max-width: 900px) {
  .split { display: flex !important; flex-direction: column !important; gap: 28px !important; }
  .split .split-copy, .split .ch-split-copy { order: 0 !important; }
  .split .split-media, .split .ch-split-media { order: 1 !important; }
}


/* Benefits my-requests mobile polish */
@media (max-width: 900px) {
  .ch-ben-head { flex-wrap: wrap !important; gap: 8px !important; padding: 12px 14px !important; }
  .ch-ben-pending { grid-template-columns: 1fr !important; gap: 10px !important; margin: 12px 0 16px !important; }
  .ch-ben-card { padding: 12px !important; gap: 6px !important; }
  .ch-ben-card-h { grid-template-columns: 34px minmax(0, 1fr) !important; align-items: center !important; }
  .ch-ben-card-hbody { gap: 4px !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; }
  .ch-ben-card-title { font-size: 13px !important; }
  .ch-ben-card-meta { padding: 6px 0 0 44px !important; }
  .ch-ben-row { padding: 10px 12px !important; }
  .ch-ben-list { gap: 8px !important; }
  .ch-ben-row .ch-req-brq { flex: 0 0 auto !important; }
  .ch-ben-row .ch-req-title { white-space: normal !important; line-height: 1.3 !important; }
  .ch-ben-approved-h { padding: 10px 14px 8px !important; }
}


/* Benefits pending+approved mobile row rework */
@media (max-width: 900px) {
  /* Pending: icon | title + tag on one line */
  .ch-ben-card-h { grid-template-columns: 34px minmax(0, 1fr) !important; align-items: center !important; }
  .ch-ben-card-hbody { flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
  .ch-ben-card-title { font-size: 13.5px !important; }
  .ch-ben-tag { flex: 0 0 auto !important; }
  .ch-ben-card-meta { padding: 4px 0 0 46px !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; }
  .ch-ben-meta-l { align-items: baseline !important; justify-content: flex-start !important; gap: 4px !important; }
  .ch-ben-meta-l small::after { content: ":"; }

  /* Approved rows: 2-col grid, ref+amount on top, title+tag on 2nd row, date below */
  .ch-ben-row { display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: "ref amt" "body tag" !important; align-items: center !important; gap: 6px 12px !important; padding: 12px 14px !important; }
  .ch-ben-row .ch-ben-ref { grid-area: ref !important; }
  .ch-ben-row .ch-ben-rowbody { grid-area: body !important; }
  .ch-ben-row .ch-ben-amt { grid-area: amt !important; justify-self: end !important; }
  .ch-ben-row .ch-ben-tag { grid-area: tag !important; justify-self: end !important; }
  .ch-ben-row .ch-ben-rowbody b { font-size: 13px !important; white-space: normal !important; }
  .ch-ben-row .ch-ben-rowbody small { display: block !important; margin-top: 2px !important; }
}


/* MAX FORCE benefits date align */
.ch-ben .ch-ben-card .ch-ben-card-meta,
.ch-ben-card .ch-ben-card-meta { display: flex !important; justify-content: flex-start !important; align-items: center !important; padding: 4px 0 0 46px !important; margin: 0 !important; text-align: left !important; width: 100% !important; box-sizing: border-box !important; }
.ch-ben .ch-ben-card .ch-ben-meta-l,
.ch-ben-card .ch-ben-meta-l { display: inline-flex !important; flex: 0 0 auto !important; align-items: baseline !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; gap: 4px !important; }
.ch-ben-card { text-align: left !important; }