/* ============================================================
   YOUR HR TOOLKIT. Design System
   Fonts: Bebas Neue (headings) + DM Sans (body/UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── CSS Variables ──────────────────────────────────────────── */

:root {
  /* Brand palette — per yhrtk-brand skill §3 */
  --indigo:          #6123FE;   /* primary — CTAs, headings */
  --indigo-dark:     #491BBC;   /* hover / pressed */
  --pink:            #FA44AB;   /* accent, section eyebrows, borders */
  --lime:            #D1FC30;   /* accent — on dark only, sparingly */
  --cyan:            #01EAFB;   /* third accent */
  --navy:            #1a1a2e;   /* footers, final CTAs, compliance callouts ONLY */
  --mid-purple:      #2d1b6e;   /* gradient midpoints only */

  /* Neutrals */
  --light-bg:        #f9f8fd;   /* preferred section background */
  --border:          #e2e0ec;
  --border-soft:     #f0eef6;
  --text:            #1a1a2e;
  --muted:           #5a5870;
  --hint:            #9896a8;
  --white:           #ffffff;
  --surface:         #ffffff;
  --surface-2:       #fafaff;

  /* State colours */
  --danger:          #EF4444;
  --warning:         #F59E0B;
  --success:         #10B981;

  /* Light tints for icon boxes + callouts */
  --tint-primary:    #f0edff;
  --tint-secondary:  #fff0f8;
  --tint-success:    #f7ffe0;
  --tint-cyan:       #e0feff;
  --tint-danger:     #fff1f1;
  --tint-warning:    #fff7e0;

  /* Per-org overrides. Applied by applyOrgBranding() — client-customisable. */
  --brand-primary:   #6123FE;
  --brand-primary-dk: #491BBC;
  --brand-secondary: #FA44AB;

  /* Alpha-tinted brand-primary tokens (UX r2, 2026-05-01).
     Overwritten at runtime by applyOrgBranding() and brand-prepaint.js so
     per-org backgrounds and shadows cascade. Defaults are the YHRTK indigo
     #6123FE (rgb 97,35,254). */
  --brand-primary-04: rgba(97,35,254,0.04);
  --brand-primary-08: rgba(97,35,254,0.08);
  --brand-primary-12: rgba(97,35,254,0.12);
  --brand-primary-16: rgba(97,35,254,0.16);
  --brand-primary-24: rgba(97,35,254,0.24);
  /* Annabelle 2026-04-30: default accent reverted from lime (#D1FC30) to
     pink (#FA44AB). Lime on light backgrounds was hard to read; lime is
     reserved for dark surfaces only (see --lime token above). Per-org
     accent override still applies via applyOrgBranding(). */
  --brand-accent:    #FA44AB;
  --brand-text-on-primary: #FFFFFF;

  /* Layout */
  --sidebar-width:   240px;

  /* Radii */
  --radius-xs:       4px;
  --radius:          8px;
  --radius-lg:       12px;
  --radius-xl:       14px;

  /* Shadows — brand-tinted, cascade through alpha tokens (UX r2 2026-05-01).
     Defaults are still YHRTK indigo; per-org branding rewrites the alpha
     tokens so shadows tint correctly without touching this declaration. */
  --shadow-xs:       0 1px 2px var(--brand-primary-04);
  --shadow:          0 2px 6px var(--brand-primary-08), 0 1px 2px var(--brand-primary-04);
  --shadow-md:       0 8px 24px var(--brand-primary-08), 0 2px 6px var(--brand-primary-04);
  --shadow-lg:       0 16px 40px var(--brand-primary-12), 0 4px 12px var(--brand-primary-04);

  /* Spacing scale (4px base) */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-xl:        64px;
  --space-2xl:       96px;

  /* Card padding (UX r2 2026-05-01) — single source of truth so .card-body,
     .dash-card, .hub-card, .stat-tile and .foundation-card all share one
     value. Mobile overrides drop to 16px in the 768px breakpoint. */
  --card-padding:    var(--space-6);

  /* Display type tokens (Sprint 13) */
  --display-xl: clamp(40px, 6vw, 64px);   /* page-hero heading */
  --display-lg: clamp(28px, 4vw, 40px);   /* card section heads */
  --display-md: clamp(22px, 3vw, 28px);   /* h2 */
  --display-sm: clamp(18px, 2.4vw, 22px); /* h3 */
}

/* ── Reset + Base ───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--light-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }

h4, h5, h6 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}

h4 { font-size: 1rem; }
h5 { font-size: 0.9375rem; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

p { line-height: 1.6; }

/* ── Layout ─────────────────────────────────────────────────── */

.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--light-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

/* Sprint 6b sidebar — brand block matches mockup .sidebar-logo pattern */
.sidebar-brand {
  padding: 20px 14px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 4px 10px 0;
}

/* Sprint 6b — gradient mark (indigo → pink) with "HR" in Bebas Neue */
.sidebar-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: var(--brand-text-on-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Sprint 6b — wordmark beside the mark */
.sidebar-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1;
}

/* Legacy: still used by pages that reference .org-logo / .org-name-display.
   Do NOT remove — applyOrgBranding() still writes into these selectors. */
.org-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
}

.org-logo-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-text-on-primary, #fff);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
}

.org-name-display {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.3;
}

.sidebar-nav {
  flex: 1;
  padding: 4px 0;
}

/* Sprint 6b — per-section wrapper (padding only) */
.nav-section {
  padding: 0 8px;
}

/* Sprint 6b — section header matches mockup: 10px bold tracked 0.14em */
.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hint);
  padding: 16px 12px 8px;
  display: block;
}

/* Sprint 6b — nav items use tint-primary tokens for hover/active states */
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  margin-bottom: 2px;
}

.nav-item:hover {
  background: var(--tint-primary);
  color: var(--brand-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--tint-primary);
  color: var(--brand-primary);
  font-weight: 600;
}

.nav-item svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

.nav-item.active svg,
.nav-item:hover svg {
  opacity: 1;
}

.nav-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sprint 6b — optional pink pill badge for counts on nav items */
.nav-item .badge {
  margin-left: auto;
  background: var(--brand-secondary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Sprint 13: Grouped sidebar (collapsible groups) ─────────────────── */
.nav-toplevel {
  padding: 0 8px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.nav-group {
  padding: 0 8px;
  margin-top: 2px;
}
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: var(--radius);
  transition: background 0.12s, color 0.12s;
}
.nav-group-toggle:hover {
  background: var(--tint-primary);
  color: var(--brand-primary);
}
.nav-group-toggle .group-icon {
  display: flex;
  align-items: center;
}
.nav-group-toggle .group-icon svg {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
.nav-group-toggle .group-label {
  flex: 1;
  text-align: left;
}
.nav-group-toggle .chevron {
  display: flex;
  align-items: center;
  transition: transform 0.15s;
}
.nav-group-toggle .chevron svg {
  width: 14px;
  height: 14px;
}
.nav-group[data-collapsed="false"] .nav-group-toggle .chevron {
  transform: rotate(180deg);
}
.nav-group-items {
  padding-left: 8px;
  padding-bottom: 4px;
}
.nav-group[data-collapsed="true"] .nav-group-items {
  display: none;
}
.nav-scope-tag {
  margin-left: auto;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--tint-primary);
  color: var(--brand-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
}

/* Sprint 6b — footer/user avatar uses brand gradient so client brands flow through */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: var(--brand-text-on-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: capitalize;
}

/* ── Main Content ───────────────────────────────────────────── */

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.page-header {
  padding: 28px 32px 0;
  background: var(--white);
}

.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 2px;
}

.page-body {
  padding: 24px 32px 40px;
  flex: 1;
}

/* ── Sprint 6b — Shared page top (header bar) ────────────────
   New pattern from platform-v2-light-preview mockup. Full-width bar
   above page content with optional search + right-hand cluster
   (notification bell + avatar). Legacy pages still use .page-header /
   .page-header-row; both patterns can coexist. */
.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.search-bar {
  position: relative;
  flex: 1;
  max-width: 420px;
}

.search-bar input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--light-bg);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}

.search-bar input:focus {
  background: var(--surface);
  border-color: var(--brand-primary);
}

.search-bar svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--hint);
  pointer-events: none;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.bell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  color: var(--muted);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.bell:hover {
  background: var(--tint-primary);
  color: var(--brand-primary);
}

.bell-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-secondary);
  border: 2px solid var(--surface);
}

/* ── Sprint 9 — Canonical page hero + stat row ────────────────
   Lifted from briefs/mockups/platform-v2-light-preview.html (canonical)
   and frontend/leave-v2/index.html (live reference). Use these classes on
   every new page port. Do NOT redeclare locally. */
.page-hero {
  background: var(--tint-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(250,68,171,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 0.98;
  color: var(--brand-primary);
  margin: 0 0 8px;
  position: relative;
  letter-spacing: 0.02em;
}
.page-hero h1 em {
  font-style: normal;
  color: var(--brand-secondary);
}
.page-hero .sub {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  position: relative;
  margin: 0;
}
.page-hero-actions,
.page-hero .hero-actions {
  /* Sprint 9 9g-1: pages historically used class="hero-actions" inside the
     hero. Both names resolve to the same rule so the 18 pages with local
     <style>-block dupes can drop their own definition without breaking
     button layout. New pages should prefer .page-hero-actions on the
     wrapper itself. */
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-xs);
}
.stat-tile .icon-box {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--tint-primary);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-tile .icon-box.alt   { background: var(--tint-secondary); color: var(--brand-secondary); }
.stat-tile .icon-box.cyan  { background: var(--tint-cyan); color: #007a82; }
.stat-tile .icon-box.lime  { background: var(--tint-success); color: #3a5000; }
.stat-tile .val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0.02em;
}
.stat-tile .val em { font-style: normal; color: var(--brand-secondary); }
.stat-tile .lbl {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.stat-tile .delta {
  font-size: 11px;
  color: var(--success);
  margin-top: 6px;
  font-weight: 600;
}
.stat-tile .delta.down  { color: var(--danger); }
.stat-tile .delta.warn  { color: var(--warning); }
.stat-tile .delta.muted { color: var(--hint); }

@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .page-hero { padding: 24px; }
}
@media (max-width: 480px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* ── Cards ──────────────────────────────────────────────────── */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card-header {
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.card-body {
  padding: var(--card-padding);
}

.card + .card {
  margin-top: 16px;
}

/* ── Stat Cards ─────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.25rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: 0.02em;
}

.stat-change {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 4px;
}

.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1.5px solid transparent;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-secondary {
  background: var(--white);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--light-bg);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-primary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: rgba(97, 35, 254, 0.06);
}

.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.btn-danger:hover {
  filter: brightness(1.08);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 11px 24px;
  font-size: 1rem;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg { flex-shrink: 0; }

/* ── Forms ──────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 20px;
  /* Sprint 8d item 32: keep grid children from blowing past their cell width
     (long emails were overflowing the column on the onboarding/employee form). */
  min-width: 0;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(97, 35, 254, 0.1);
}

/* Global keyboard focus ring. WCAG 2.4.7 (focus visible). Applies to every
   focusable element EXCEPT mouse-click focus (via :focus-visible). Elements
   with a stronger local focus state (.form-control:focus above, buttons with
   custom focus in place) still override. */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-to-content link. WCAG 2.4.1 (bypass blocks). Invisible until keyboard
   focus, then slides down. Injected by initPage() in app.js. Target element
   gets id="main-content" assigned dynamically. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  background: var(--brand-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  z-index: 10000;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Visually-hidden utility. accessible label for screen readers only. Use on
   icon-only buttons, decorative images, and anywhere a sighted user does not
   need the text but an SR/keyboard user does. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-control::placeholder { color: var(--muted); }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E7A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 4px;
}

.form-error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: 4px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

textarea.form-control { resize: vertical; min-height: 100px; }

/* ── Tables ─────────────────────────────────────────────────── */

.table-container {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead tr {
  background: var(--light-bg);
  border-bottom: 1px solid var(--border);
}

th {
  padding: 10px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

tbody tr:last-child { border-bottom: none; }

tbody tr:hover { background: rgba(97, 35, 254, 0.02); }

td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--text);
  vertical-align: middle;
}

/* ── Badges ─────────────────────────────────────────────────── */

/* Sprint 9 walkthrough fix: every status / role / tag chip on the platform
   capitalises its content via CSS. The DB stores values like "active",
   "pending", "full-time", "engagement" in lowercase; per-page renderers
   used to titleCase by hand and missed several spots. A blanket
   `text-transform: capitalize` on the chip classes catches those gaps
   without per-page surgery. Pages that need preserve-case (rare) can
   override with text-transform: none on the inner span. */
.badge,
.pill,
.chip,
.tag-chip,
.role-pill,
.status-pill,
.status-badge,
.priority-pill,
.priority-badge,
.workflow-status-pill,
.inst-status,
.flow-node .node-chip,
[data-cap] {
  text-transform: capitalize;
}
/* Some chip texts already include hyphens / underscores e.g. "in_progress",
   "written_warning". The capitalize rule only capitalises the first letter
   of each word boundary, so swap those separators to spaces in CSS-rendered
   layout. Pages that pass already-formatted strings (e.g. "Written Warning")
   are unaffected because nothing changes. */
.badge,
.pill,
.chip {
  word-spacing: normal;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-active    { background: #D1FAE5; color: #065F46; }
.badge-onboarding { background: #EDE9FE; color: #5B21B6; }
.badge-offboarding { background: #FEF3C7; color: #92400E; }
.badge-terminated { background: #FEE2E2; color: #991B1B; }
.badge-pending   { background: #EDE9FE; color: #5B21B6; }
.badge-sent      { background: #D1FAE5; color: #065F46; }
.badge-failed    { background: #FEE2E2; color: #991B1B; }
.badge-draft     { background: var(--light-bg); color: var(--muted); border: 1px solid var(--border); }
.badge-complete  { background: #D1FAE5; color: #065F46; }
.badge-in-progress { background: #EDE9FE; color: #5B21B6; }

/* ── Tabs ───────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.tab {
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Search / Filter bar ────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-input {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-input svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-input input {
  padding-left: 36px;
}

/* ── Avatar ─────────────────────────────────────────────────── */

/* Sprint 6b — header avatar uses brand gradient (client-customisable) */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-text-on-primary, #fff);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.25rem;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 0.6875rem;
}

/* ── Employee name cell ─────────────────────────────────────── */

.employee-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Progress bar ───────────────────────────────────────────── */

.progress {
  height: 6px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--brand-primary);
  border-radius: 100px;
  transition: width 0.3s;
}

.progress-bar.success { background: var(--success); }

/* ── Onboarding timeline ────────────────────────────────────── */

.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.timeline-phase {
  margin-bottom: 32px;
}

.timeline-phase-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: -32px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.timeline-dot.complete {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.timeline-dot.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.timeline-phase-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text);
}

.timeline-phase-date {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── Task item ──────────────────────────────────────────────── */

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.task-item:last-child { border-bottom: none; }

.task-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  transition: all 0.15s;
  margin-top: 1px;
}

.task-check.checked {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.task-check:hover { border-color: var(--brand-primary); }

.task-content { flex: 1; min-width: 0; }

.task-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}

.task-title.done {
  text-decoration: line-through;
  color: var(--muted);
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── Role badge for tasks ───────────────────────────────────── */

.role-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-badge.employee  { background: #EDE9FE; color: #5B21B6; }
.role-badge.manager   { background: #DBEAFE; color: #1E40AF; }
.role-badge.hr        { background: #FCE7F3; color: #9D174D; }
.role-badge.it        { background: #D1FAE5; color: #065F46; }
.role-badge.payroll   { background: #FEF3C7; color: #92400E; }

/* ── Alerts ─────────────────────────────────────────────────── */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.alert-info    { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.alert-danger  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ── Loading spinner ────────────────────────────────────────── */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 0.875rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}

.empty-state svg {
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* ── Multi-step wizard ──────────────────────────────────────── */

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
}

.wizard-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-left: 8px;
}

.wizard-step.done:not(:last-child)::after {
  background: var(--brand-primary);
}

.wizard-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--white);
  flex-shrink: 0;
}

.wizard-step.active .wizard-step-num {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.wizard-step.done .wizard-step-num {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.wizard-step-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.wizard-step.active .wizard-step-label { color: var(--text); font-weight: 600; }
.wizard-step.done .wizard-step-label { color: var(--success); }

.wizard-pane { display: none; }
.wizard-pane.active { display: block; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* ── Section divider ────────────────────────────────────────── */

.section-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 20px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

/* ── Dropdown menu ──────────────────────────────────────────── */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
  display: none;
}

.dropdown-menu.open { display: block; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.dropdown-item:hover { background: var(--light-bg); text-decoration: none; }
.dropdown-item.danger { color: var(--danger); }

/* ── Login page ─────────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  padding: 32px 16px;
}

.login-left {
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(30,27,75,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 48px;
}

.login-brand {
  text-align: center;
  margin-bottom: 40px;
}

.login-brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  margin-bottom: 12px;
}

.login-brand-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  color: var(--brand-primary);
  letter-spacing: 0.04em;
}

.login-form {
  width: 100%;
}

.login-form h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  color: var(--text);
  margin-bottom: 6px;
}

.login-form p {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 28px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-google {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  justify-content: center;
  font-weight: 600;
}

.btn-google:hover { background: var(--light-bg); }

.btn-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 8px;
}
.btn-microsoft:hover {
  background: #f5f5f5;
}

.login-right {
  flex: 1;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 60%, var(--brand-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.login-right-content {
  position: relative;
  z-index: 1;
  color: white;
  max-width: 400px;
}

.login-right-content h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.95;
}

.login-right-content p {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.6;
}

/* ── Modal ──────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 75, 0.4);
  backdrop-filter: blur(2px);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  padding: 24px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.modal-close:hover { color: var(--text); background: var(--light-bg); }

.modal-body { padding: 20px 24px 24px; }

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Utility ────────────────────────────────────────────────── */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .col-span-2 { grid-column: span 1; }
  .col-span-3 { grid-column: span 2; }
}

/* ── Mobile sidebar toggle ──────────────────────────────────── */

.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 150;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.mobile-nav-toggle:hover {
  background: var(--light-bg);
  color: var(--brand-primary);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 75, 0.4);
  backdrop-filter: blur(2px);
  z-index: 99;
}

.sidebar-backdrop.open { display: block; }

/* Sprint 8d item 31: floating Your HR Helper pill removed (renamed from
   "Ask YHRTK Agent" 2026-04-27). Replaced by a sidebar entry + right-edge
   slide-in panel (see injectAskYhrtkAgent in app.js). The legacy
   .copilot-pill class and the renamed .helper-pill class are both kept
   as display:none so any stray markup that still references either
   stays hidden. */
.copilot-pill,
.helper-pill { display: none !important; }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .login-left { width: 100%; border-right: none; }
  .login-right { display: none; }
  .page-body { padding: 16px 20px 32px; }
  .page-header { padding: 20px 20px 0 64px; }
  .mobile-nav-toggle { display: inline-flex; }

  /* UX audit 2026-05-01: WCAG 2.5.5 target size (AAA) recommends 44x44px
     interactive targets on touch screens. Bumps the standard button
     and the smaller .btn-sm pill on mobile only so it does not bloat
     desktop dense layouts. .btn-lg is already > 44px. */
  .btn,
  .btn-sm {
    min-height: 44px;
  }
  .btn-sm {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  /* Tab targets and nav items need the same affordance. */
  .tab,
  .nav-item,
  .dropdown-item {
    min-height: 44px;
  }
  .task-check {
    width: 24px;
    height: 24px;
  }
}

/* ── Policy Document Display ────────────────────────────────── */

.policy-doc {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.doc-header {
  background: linear-gradient(135deg, var(--brand-primary, #6123FE), var(--brand-secondary, #FA44AB));
  padding: 28px 36px;
}

.doc-header-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D1FC30;
  margin-bottom: 8px;
}

.doc-header-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 4vw, 40px);
  color: #fff;
  letter-spacing: .02em;
  line-height: 1;
}

.doc-header-sub {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.75);
  margin-top: 8px;
  line-height: 1.6;
}

.doc-meta {
  /* Sprint 11 frontend-UX: removed banned dark #1a1a2e background per
     feedback_design_theme.md (light theme only). Now uses tint-primary
     so it follows the brand cascade and reads on a light page. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--tint-primary, #f0edff);
  border-radius: 12px;
  padding: 14px 36px;
  gap: 20px;
}

.doc-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  /* Annabelle 2026-05-01 (her sixth ask on this): the meta strip is on a
     LIGHT tint background per the Sprint 11 frontend-UX redesign. The label
     and value text were left as white-with-opacity from the original dark-bg
     version, so every label and value rendered as white-on-light and was
     invisible. Switched to dark-on-light using muted + text tokens for AA
     contrast. */
  color: var(--muted, #5a5870);
  margin-bottom: 3px;
}

.doc-meta-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1a1a2e);
}

.doc-body { padding: 32px 36px; }

.policy-section { margin-bottom: 32px; }
.policy-section:last-child { margin-bottom: 0; }

.ps-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--brand-primary, #6123FE);
  letter-spacing: .02em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0edff;
}

.ps-title.pk { color: var(--brand-secondary); border-bottom-color: #fff0f8; }
.ps-title.tl { color: #007c8a; border-bottom-color: #e2fafb; }
.ps-title.gn { color: #4a7a1a; border-bottom-color: #f0ffe6; }
.ps-title.yw { color: #8a6e00; border-bottom-color: #fff8e0; }

p.pt {
  font-size: 14px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 12px;
}
p.pt:last-child { margin-bottom: 0; }

ul.pl {
  list-style: none;
  padding: 0;
  margin-bottom: 12px;
}

ul.pl li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 7px;
}

ul.pl li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-primary, #6123FE);
  flex-shrink: 0;
  margin-top: 7px;
}

ul.pl.pk li::before { background: var(--brand-secondary); }
ul.pl.gn li::before { background: #7bc63e; }
ul.pl.tl li::before { background: #00bcd4; }
ul.pl li strong { font-weight: 700; color: #1a1a2e; }

.sub-heading {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 6px;
  margin-top: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.definition-block {
  background: var(--light-bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 12px;
  border-left: 4px solid var(--brand-primary, #6123FE);
}

.definition-block.pk { border-left-color: var(--brand-secondary); }
.definition-block.tl { border-left-color: #00bcd4; }
.definition-block.gn { border-left-color: #7bc63e; }
.definition-block.yw { border-left-color: #c8a000; }

.definition-term {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 5px;
}

.definition-text {
  font-size: 13px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
}

.compliance-block {
  background: linear-gradient(135deg, #1a1a2e, #2d1b6e);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.compliance-block h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: #D1FC30;
  letter-spacing: .02em;
  margin-bottom: 8px;
}

.compliance-block p,
.compliance-block li {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
}

.compliance-block ul { list-style: none; padding: 0; }

.compliance-block li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 5px;
}

.compliance-block li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D1FC30;
  flex-shrink: 0;
  margin-top: 8px;
}

.strip {
  background: #f0edff;
  border-left: 4px solid var(--brand-primary, #6123FE);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text);
}

.strip.pk { background: #fff0f8; border-left-color: var(--brand-secondary); }
.strip.yw { background: #fff8e0; border-left-color: #c8a000; }
.strip strong { font-weight: 700; color: #1a1a2e; }

.sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 28px;
}

.sig-line {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.policy-footer-bar {
  /* Sprint 11 frontend-UX: removed banned dark #1a1a2e background per
     feedback_design_theme.md. Light tinted footer bar matches the
     .doc-meta header bar above. */
  background: var(--tint-primary, #f0edff);
  border-radius: 12px;
  padding: 12px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-item {
  font-size: 11px;
  /* Annabelle 2026-05-01 (sixth ask): footer bar is light-tinted (matches
     .doc-meta), so white-with-opacity text was invisible. Switched to
     muted-on-light for the regular text and text-on-light for emphasised. */
  color: var(--muted, #5a5870);
  font-weight: 300;
}

.pf-item strong { color: var(--text, #1a1a2e); }

/* Policy template card grid */
.policy-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.policy-template-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.policy-template-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 4px 16px rgba(97,35,254,0.10);
}

.ptc-category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}

.ptc-category.safety { color: #007c8a; }
.ptc-category.hr     { color: var(--brand-primary); }
.ptc-category.technology { color: #4a7a1a; }
.ptc-category.finance    { color: #8a6e00; }

.ptc-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: #1a1a2e;
  margin-bottom: 6px;
  line-height: 1.3;
}

.ptc-desc {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 700px) {
  .doc-meta { grid-template-columns: 1fr 1fr; padding: 14px 22px; }
  .doc-header { padding: 20px 22px; }
  .doc-body { padding: 22px; }
  .sig-grid { grid-template-columns: 1fr; gap: 20px; }
  .policy-template-grid { grid-template-columns: 1fr; }
}

/* ── Layout helpers (Sprint 13) ─────────────────────────────── */

/* Action rows: button groups, toolbar rows. Wraps gracefully. */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}
.action-row > * { min-width: 0; }
@media (max-width: 600px) {
  .action-row { gap: var(--space-1); }
  .action-row .btn { flex: 1 1 calc(50% - var(--space-1)); }
}

/* Table wrap: data tables that need horizontal scroll on narrow viewports.
   Includes a soft scroll-shadow indicator on both sides. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(0,0,0,0.05), rgba(255,255,255,0) 30%) 100% 0,
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) 100% 0,
    linear-gradient(to left, rgba(0,0,0,0.05), rgba(255,255,255,0) 30%);
  background-repeat: no-repeat;
  background-size: 40px 100%, 14px 100%, 40px 100%, 14px 100%;
  background-attachment: local, scroll, local, scroll;
}

/* Tab strip: navigation tab rows that wrap rather than horizontally scroll. */
.tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
}

/* Login tagline: subtitle visible only on unbranded YHRTK login.
   Hidden when an org brand cascade is active (data-brand attribute set). */
html[data-brand] .login-tagline { display: none; }

/* ══════════════════════════════════════════════════════════════
   Sprint 13 — AI panel
   Unified "Your HR Helper" surface used across every AI moment
   (Daily Briefing, Job ad draft, Candidate insights, Interview
   guide, Document draft, Survey insights). Every AI surface
   opens with the same eyebrow + title + sparkle icon, so users
   know they are talking to one helper.
   ══════════════════════════════════════════════════════════════ */
.ai-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--tint-primary), var(--surface) 70%);
  padding: var(--space-6);
  overflow: hidden;
}
.ai-panel::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.ai-panel-header {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ai-panel-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--tint-primary);
  color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-panel-icon i[data-lucide],
.ai-panel-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.ai-panel-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--display-sm);
  letter-spacing: 0.04em;
  color: var(--text);
  flex: 1;
  margin: 0;
}
.ai-panel-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 2px;
}
.ai-panel-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
}
.ai-panel-body p { margin-bottom: var(--space-3); }
.ai-panel-body p:last-child { margin-bottom: 0; }
.ai-panel-disclaimer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}
.ai-panel-empty {
  padding: var(--space-4) 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}
.ai-panel-loading {
  padding: var(--space-4) 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.ai-panel-action {
  margin-top: var(--space-3);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   Mobile-first / app readiness layer (2026-05-01)
   Author: mobile-first agent (sprint-mobile-app-2026-05-01)

   Scope: mobile-only overrides for touch-target sizing, keyboard
   handling on iOS, safe-area insets for notched devices, and a
   bottom-nav surface for the most-used employee-self-serve pages.

   Rules of engagement:
   - Desktop UI is untouched. Every rule below sits inside a
     @media query targeting <= 720px (or smaller).
   - All colours via CSS vars so org brand cascade still applies.
   - Bottom-nav is opt-in: pages get it for free on mobile because
     it's gated on .has-mobile-bottom-nav being added to <body>
     by initPage() (deferred dev followup) OR can be triggered by
     adding the class manually. Until then it's dormant CSS only.
   - No JS in this file. All interactivity lives in app.js.
   ══════════════════════════════════════════════════════════════ */

/* iOS safe-area inset support. Devices with a notch or home indicator
   need padding-top / padding-bottom inside the viewport so content
   doesn't hide under the chrome. Pages opt in via env(). */
@supports (padding: max(0px)) {
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* Tap-highlight + tap-action defaults — quieter than the iOS grey flash. */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn, .form-control, [role="button"] {
    -webkit-tap-highlight-color: rgba(97, 35, 254, 0.15);
    touch-action: manipulation;
  }
}

@media (max-width: 720px) {
  /* ── Touch targets ───────────────────────────────────────────
     WCAG 2.5.5 + Apple HIG: minimum 44x44 CSS px for any
     interactive element. Buttons, form controls, sidebar items
     and topbar icons all bumped to clear that floor. */
  .btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.9375rem;
  }
  .btn-sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.875rem;
  }
  .btn-lg {
    min-height: 52px;
    padding: 14px 24px;
    font-size: 1rem;
  }

  /* iOS auto-zooms when input font-size < 16px. Bump up so the
     viewport stays put on focus. Padding bumped to match the
     44px touch-target floor. */
  .form-control {
    font-size: 16px;
    padding: 11px 14px;
    min-height: 44px;
  }
  textarea.form-control {
    min-height: 120px;
    font-size: 16px;
  }

  /* Larger tap targets in tables. Default rows are too cramped
     for finger taps. */
  .table-container td,
  .table-container th {
    padding: 12px 14px;
    font-size: 0.9375rem;
  }
  .table-container a,
  .table-container button,
  .table-container .btn {
    min-height: 36px;
  }

  /* Sidebar nav items get a bigger hit area on mobile. */
  .sidebar-nav a,
  .sidebar-nav .nav-item {
    min-height: 44px;
  }

  /* Mobile nav toggle gets a bigger button. */
  .mobile-nav-toggle {
    width: 44px;
    height: 44px;
  }

  /* Page padding tightens up so cards don't lose horizontal space. */
  .page-body {
    padding: 14px 14px 80px; /* bottom: 80px reserves space for bottom-nav */
  }
  .page-header {
    padding: 16px 16px 0 60px;
  }

  /* Form grids collapse to single-column. (1024px rule already
     handled .form-grid; this one targets the 3-col variant on
     narrow screens.) */
  .form-grid,
  .form-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .col-span-2,
  .col-span-3 {
    grid-column: span 1 !important;
  }

  /* Card padding tightens up. */
  .card-header {
    padding: 16px 16px 0;
  }
  .card-body {
    padding: 16px;
  }

  /* Tab strips: scroll horizontally on mobile rather than wrap
     into 3 lines of tabs. */
  .tab-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .tab-strip > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  /* Action rows: each button gets a sane minimum width so two
     don't collapse to icons-only. */
  .action-row .btn {
    min-height: 44px;
    flex: 1 1 calc(50% - var(--space-1));
  }

  /* Stat tiles already collapse to 1-col below 480px (legacy
     rule). Bump tap targets so the whole tile is a visual button
     where the value is the focal point. */
  .stat-tile {
    padding: 16px;
  }

  /* Dashboard "brief" buttons + dismiss + bell — these are local
     button styles (.btn-brief, .roadmap-dismiss, .notif-bell-btn)
     that bypass the global .btn touch-target rule. Bump them to
     the 44x44 floor on mobile. WCAG 2.5.5. */
  .btn-brief {
    min-height: 44px;
  }
  .roadmap-dismiss {
    min-width: 44px;
    min-height: 44px;
  }
  .notif-bell-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Mobile bottom nav (PWA / app-like surface) ──────────────────
   Hidden by default on every viewport. Enabled per-page (or
   globally) by adding `has-mobile-bottom-nav` to <body>, which
   is the deferred Claude-dev followup. The class also pushes
   .page-body padding-bottom up so content doesn't hide under
   the bar.

   The DOM markup expected (to be injected by app.js initPage()
   when has-mobile-bottom-nav is set):

   <nav class="mobile-bottom-nav" aria-label="Quick navigation">
     <a href="/dashboard.html" class="mbn-item">
       <i data-lucide="home"></i><span>Home</span>
     </a>
     <a href="/leave-v2/my-leave.html" class="mbn-item">
       <i data-lucide="calendar"></i><span>Leave</span>
     </a>
     <a href="/me/my-tasks.html" class="mbn-item">
       <i data-lucide="check-square"></i><span>Tasks</span>
     </a>
     <a href="/me/details.html" class="mbn-item">
       <i data-lucide="user"></i><span>Me</span>
     </a>
   </nav>
*/
.mobile-bottom-nav { display: none; }

@media (max-width: 720px) {
  body.has-mobile-bottom-nav .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(26, 26, 46, 0.06);
    z-index: 90;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0));
  }

  body.has-mobile-bottom-nav {
    /* Push the page body up so the bottom-nav doesn't cover it. */
    padding-bottom: 0; /* the inset is already on .mobile-bottom-nav */
  }

  body.has-mobile-bottom-nav .page-body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }

  .mobile-bottom-nav .mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s;
  }
  .mobile-bottom-nav .mbn-item i,
  .mobile-bottom-nav .mbn-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }
  .mobile-bottom-nav .mbn-item.active {
    color: var(--brand-primary);
  }
  .mobile-bottom-nav .mbn-item:hover {
    color: var(--brand-primary);
  }
  .mobile-bottom-nav .mbn-item:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: -3px;
    border-radius: 2px;
  }
}

/* iOS PWA-only fixes. When launched from home screen, the WebView
   has no chrome, so safe-area insets are critical. */
@media (display-mode: standalone) {
  /* Pull the sidebar header below the iOS status bar. */
  .sidebar { padding-top: env(safe-area-inset-top, 0); }
  .page-header { padding-top: calc(28px + env(safe-area-inset-top, 0)); }

  /* Prevent the rubber-band overscroll glow from showing the
     surface below the app. */
  html, body { overscroll-behavior-y: contain; }
}

/* ── Premium polish layer (Stream C, 2026-05-05) ─────────────────────
   Small, additive layer of micro-interactions + accessibility wins
   that lift the perceived quality without changing any module's
   markup. Used by the design-review mockups under /mockups/. */

/* 1. Honour OS-level reduced motion preference. WCAG 2.3.3 + premium
   accessibility signal. Applies globally so every card lift, hover
   transform, and shimmer respects the user's setting. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2. Skeleton shimmer for loading states. Use on any element with
   a fixed height/width while data loads, in place of the current
   "Loading…" text. Pattern: <div class="skeleton" style="width:80%;height:14px;"></div>. */
@keyframes yhrtk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--border-soft) 0%,
    var(--brand-primary-08) 50%,
    var(--border-soft) 100%);
  background-size: 800px 100%;
  border-radius: 6px;
  animation: yhrtk-shimmer 1.6s linear infinite;
  color: transparent;
  user-select: none;
}
.skeleton.skeleton-text {
  height: 14px;
  margin: 4px 0;
  width: 100%;
}
.skeleton.skeleton-stat {
  height: 28px;
  width: 64px;
}

/* 3. Subtle hover-lift utility for any clickable card. The transform
   is small (1px) so it reads as quality not bounce. */
.lift-on-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lift-on-hover:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary);
}
.lift-on-hover:active {
  transform: translateY(0);
}

/* 4. Premium focus ring — a soft 3px halo in brand-primary at 24% alpha
   instead of the harsh default browser ring. Pairs with the existing
   :focus-visible declarations. */
:focus-visible {
  outline-color: var(--brand-primary);
}
.btn:focus-visible,
.stat-tile:focus-visible,
.hub-card:focus-visible,
.dash-card:focus-visible,
.lift-on-hover:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-primary-24), var(--shadow);
}

/* 5. Scroll-shadow trick for any scrollable container with .scroll-shadows.
   Indicates more content above/below without taking space. */
.scroll-shadows {
  background:
    linear-gradient(var(--surface) 30%, rgba(255,255,255,0)) center top,
    linear-gradient(rgba(255,255,255,0), var(--surface) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, var(--brand-primary-12), rgba(0,0,0,0)) center top,
    radial-gradient(farthest-side at 50% 100%, var(--brand-primary-12), rgba(0,0,0,0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
  background-attachment: local, local, scroll, scroll;
}

/* 6. Eyebrow pill with a leading dot — small premium signal for
   "AI generated", "live", "new" labels. Use as <span class="eyebrow-pill">…</span>.
   Reuses the briefing-card pattern but as a global utility. */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tint-primary);
  color: var(--brand-primary);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-16);
  flex-shrink: 0;
}
.eyebrow-pill.is-live::before {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.16);
  animation: yhrtk-pulse-live 1.8s ease-in-out infinite;
}
@keyframes yhrtk-pulse-live {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.16); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.06); }
}