/* ============================================================
   CUHR — Human Resources Directorate
   Sub-brand layer on the CU "Calm Authority" design system.
   Loads AFTER cu.css. Adds tokens and components only; never
   redefines a --cu-* token. Brand spec: CUHR web/design/CUHR-BRAND.md
   People Green is never a button. Calls to action stay CU red.
   ============================================================ */
:root{
  /* signature accent — "People Green". 6.45:1 on white, 5.68:1 on the wash. */
  --cuhr-green:      #1C6B4B;
  --cuhr-green-2:    #15805A;
  --cuhr-green-wash: #E8F3EE;
  --cuhr-gold-line:  #C99A2E;

  /* status — always icon + word, never colour alone */
  --st-active:  #1A7038; --st-active-bg:  #E8F5E9;
  --st-pending: #8A5A00; --st-pending-bg: #FFF4E0;
  --st-reject:  #B42318; --st-reject-bg:  #FDECEA;
  --st-draft:   #1C6B4B; --st-draft-bg:   #E8F3EE;
  --st-na:      #595959; --st-na-bg:      #F2F2F2;

  /* data-viz palette (series order): green, maroon, gold, slate, sand */
  --viz-1:#1C6B4B; --viz-2:#3a0f0d; --viz-3:#C99A2E; --viz-4:#5B6B73; --viz-5:#D9C7A7;

  --cuhr-radius-sm: 6px;
  --cuhr-side: 260px;
}

.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.cuhr-muted{color:var(--cu-grey)}
.cuhr-small{font-size:var(--fs-small)}
.cuhr-measure{max-width:44rem}

/* ---------- lockup ---------- */
.cuhr-lockup{display:flex; align-items:center; gap:.9rem; text-decoration:none; margin-right:auto; min-width:0}
.cuhr-lockup .brand__logo{flex-shrink:0}
.cuhr-lockup__rule{width:1px; align-self:stretch; min-height:40px; background:var(--cu-line); flex-shrink:0}
.cuhr-lockup__name{font:600 .92rem/1.2 var(--font-display); font-variant:small-caps; letter-spacing:.04em;
  color:var(--cu-navy)}
.cuhr-lockup__name b{display:block; font:700 .7rem/1 var(--font-text); font-variant:normal; letter-spacing:.18em;
  color:var(--cuhr-green); margin-bottom:.3rem}
@media (max-width:760px){ .cuhr-lockup__name{font-size:.78rem; max-width:9.5rem} }
@media (max-width:420px){ .cuhr-lockup__rule,.cuhr-lockup__name span{display:none} }

.header .cuhr-actions{display:flex; gap:.6rem; align-items:center; flex-shrink:0}
.header .cuhr-actions .btn{padding:.68rem 1.05rem; font-size:.86rem; min-height:44px}
.header .cuhr-actions .btn--ghost{border-color:var(--cu-navy); color:var(--cu-navy)}
@media (max-width:960px){
  .header .cuhr-actions .btn--primary{display:inline-flex}
}
@media (max-width:620px){ .header .cuhr-actions .btn--ghost{display:none} }
@media (max-width:520px){ .header .cuhr-actions{display:none} }

/* ---------- sub-nav ---------- */
.cuhr-subnav{background:var(--cuhr-green); color:#fff; position:sticky; top:88px; z-index:45}
.cuhr-subnav .wrap{display:flex; gap:.15rem; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
.cuhr-subnav .wrap::-webkit-scrollbar{display:none}
.cuhr-subnav a{flex:0 0 auto; scroll-snap-align:start; color:#fff; text-decoration:none;
  font:600 .84rem/1 var(--font-text); padding:1rem .85rem; min-height:44px; border-bottom:3px solid transparent}
.cuhr-subnav a:hover{background:var(--cuhr-green-2)}
.cuhr-subnav a[aria-current="page"]{border-bottom-color:var(--cu-gold)}
.cuhr-subnav a:focus-visible{outline:2px solid var(--cu-gold); outline-offset:-3px}
@media (max-width:960px){ .cuhr-subnav{top:0; position:relative} }

/* ---------- kicker, seal, hero ---------- */
.cuhr-kicker{font:600 var(--fs-kicker)/1 var(--font-text); letter-spacing:.14em; text-transform:uppercase;
  color:var(--cuhr-green); margin:0 0 1rem; display:inline-flex; flex-direction:column; gap:.55rem}
.cuhr-kicker::after{content:""; width:46px; height:5px;
  border-top:1px solid var(--cuhr-gold-line); border-bottom:1px solid var(--cuhr-gold-line)}
.cuhr-seal{position:absolute; pointer-events:none; width:min(560px,80vw); aspect-ratio:1; opacity:.08;
  color:var(--cuhr-green)}
.cuhr-seal svg{width:100%; height:100%; display:block}
.cuhr-hero{position:relative; overflow:hidden; background:var(--cu-navy); color:#fff;
  padding:clamp(2.6rem,6vw,4.5rem) 0}
.cuhr-hero .cuhr-seal{right:-120px; top:50%; transform:translateY(-50%)}
.cuhr-hero .wrap{position:relative}
.cuhr-hero h1{color:#fff; font-size:var(--fs-hero); margin:0 0 1.1rem; max-width:16ch}
.cuhr-hero__lede{font-size:clamp(1.02rem,1.4vw,1.15rem); color:#F1E3DE; max-width:38rem; margin:0 0 1.6rem}
.cuhr-hero__motto{font:500 italic .98rem/1.4 var(--font-display); color:var(--cu-gold); margin:0 0 1.8rem}
.cuhr-hero__cta{display:flex; flex-wrap:wrap; gap:.8rem}
.cuhr-hero .btn--ghost{color:#fff; border-color:rgba(255,255,255,.7)}
.cuhr-pagehead{position:relative; overflow:hidden; background:var(--cu-navy); color:#fff; padding:clamp(2.4rem,5vw,3.6rem) 0}
.cuhr-pagehead .cuhr-seal{right:-160px; top:-120px; width:420px}
.cuhr-pagehead h1{color:#fff; font-size:clamp(2rem,4vw,3rem); margin:0 0 .7rem; max-width:22ch}
.cuhr-pagehead p{color:#F1E3DE; max-width:44rem; margin:0}

/* ---------- lifecycle cards ---------- */
.cuhr-lifecycle{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:var(--space-3)}
@media (max-width:900px){ .cuhr-lifecycle{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cuhr-lifecycle{grid-template-columns:1fr} }
.cuhr-stage{display:flex; flex-direction:column; gap:.45rem; background:var(--cu-surface); border:1px solid var(--cu-line);
  border-radius:var(--radius); padding:1.2rem 1.25rem 1.4rem; border-top:3px solid var(--cuhr-green)}
.cuhr-stage h3{margin:0; font-size:1.08rem}
.cuhr-stage p{margin:0; color:var(--cu-grey); font-size:var(--fs-small); line-height:1.6}
.cuhr-numeral{font:600 1.6rem/1 var(--font-display); color:var(--cuhr-green); letter-spacing:.04em}

.cuhr-grid{display:grid; gap:1.1rem}
.cuhr-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){ .cuhr-grid--2{grid-template-columns:1fr} }

/* ---------- chips ---------- */
.cuhr-chip{display:inline-flex; align-items:center; gap:.35rem; font:700 .74rem/1 var(--font-text);
  padding:.45rem .7rem .45rem .55rem; border-radius:999px; white-space:nowrap; border:1px solid transparent; min-height:32px}
.cuhr-chip::before{font-size:.8rem; line-height:1}
.cuhr-chip--active{color:var(--st-active); background:var(--st-active-bg); border-color:#B7DFB9}
.cuhr-chip--active::before{content:"✓"}
.cuhr-chip--pending{color:var(--st-pending); background:var(--st-pending-bg); border-color:#F2D9A6}
.cuhr-chip--pending::before{content:"◐"}
.cuhr-chip--reject{color:var(--st-reject); background:var(--st-reject-bg); border-color:#F4C2BD}
.cuhr-chip--reject::before{content:"✕"}
.cuhr-chip--draft{color:var(--st-draft); background:var(--st-draft-bg); border-color:#C5DDD2}
.cuhr-chip--draft::before{content:"•"}
.cuhr-chip--na{color:var(--st-na); background:var(--st-na-bg); border-color:#DDD}
.cuhr-chip--na::before{content:"–"}

/* ---------- empty, notices ---------- */
.cuhr-empty{text-align:center; padding:2.2rem 1.4rem; border:1px dashed #C5DDD2;
  border-radius:var(--radius); background:linear-gradient(180deg,#fff,var(--cuhr-green-wash))}
.cuhr-empty h3{margin:0 0 .35rem; font-size:1.02rem}
.cuhr-empty p{margin:0 auto; max-width:30rem; color:var(--cu-grey); font-size:var(--fs-small)}
.cuhr-notice{border-radius:var(--radius); padding:1rem 1.15rem; border:1px solid #C5DDD2;
  background:var(--cuhr-green-wash); font-size:.93rem; line-height:1.6; border-left:4px solid var(--cuhr-green)}
.cuhr-notice strong{color:var(--cu-navy)}

/* ---------- tables ---------- */
.cuhr-table-wrap{overflow-x:auto; border:1px solid var(--cu-line); border-radius:var(--radius); background:var(--cu-surface)}
.cuhr-table{width:100%; border-collapse:collapse; font-size:var(--fs-small)}
.cuhr-table caption{caption-side:top; text-align:left; padding:.9rem 1rem .4rem; font:600 .95rem var(--font-text); color:var(--cu-navy)}
.cuhr-table th{background:var(--cuhr-green); color:#fff; text-align:left; font:600 .8rem var(--font-text);
  padding:.7rem .9rem; white-space:nowrap}
.cuhr-table td{padding:.7rem .9rem; border-top:1px solid var(--cu-line); vertical-align:top}
.cuhr-table tbody tr:nth-child(even) td{background:#FAFBFB}
.cuhr-table tbody tr:hover td{background:var(--cuhr-green-wash)}

/* ---------- steps ---------- */
.cuhr-steps{list-style:none; counter-reset:cuhrstep; margin:var(--space-3) 0 0; padding:0; display:grid; gap:.8rem}
.cuhr-steps li{counter-increment:cuhrstep; display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; align-items:start;
  background:var(--cu-surface); border:1px solid var(--cu-line); border-radius:var(--radius); padding:1rem 1.1rem}
.cuhr-steps li::before{content:counter(cuhrstep); width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--cuhr-green); color:#fff; display:grid; place-items:center; font:600 1.05rem var(--font-display)}
.cuhr-steps h3{margin:0 0 .2rem; font-size:1rem}
.cuhr-steps p{margin:0; font-size:var(--fs-small); color:var(--cu-grey)}

/* ---------- forms (green is the focus ring, never the button) ---------- */
.cuhr-form{display:grid; gap:1rem}
.cuhr-field{display:flex; flex-direction:column; gap:.35rem}
.cuhr-field > label{font:600 .84rem var(--font-text); color:var(--cu-navy)}
.cuhr-field .hint{font-size:.8rem; color:var(--cu-grey)}
.cuhr-form input[type=text], .cuhr-form input[type=email], .cuhr-form input[type=tel],
.cuhr-form input[type=date], .cuhr-form select, .cuhr-form textarea{
  width:100%; min-height:44px; padding:.68rem .8rem; border:1px solid #CFD5D8; border-radius:var(--cuhr-radius-sm);
  font:500 .95rem var(--font-text); color:var(--cu-ink); background:#fff}
.cuhr-form textarea{min-height:7rem; resize:vertical; line-height:1.55}
.cuhr-form input:focus, .cuhr-form select:focus, .cuhr-form textarea:focus{
  outline:2px solid var(--cuhr-green); outline-offset:1px; border-color:var(--cuhr-green)}
.cuhr-row{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (max-width:640px){ .cuhr-row{grid-template-columns:1fr} }
.btn--sm{padding:.55rem .9rem; font-size:.82rem; min-height:44px}
.btn[disabled], .btn[aria-disabled="true"]{opacity:.55; pointer-events:none}

/* ---------- charts: a table of the same numbers always sits with these ---------- */
.cuhr-bars{display:grid; gap:.55rem}
.cuhr-bar{display:grid; grid-template-columns:minmax(7rem,12rem) 1fr auto; gap:.7rem; align-items:center; font-size:.85rem}
.cuhr-bar__track{height:12px; background:#E3E8EA; border-radius:999px; overflow:hidden}
.cuhr-bar__fill{height:100%; border-radius:999px}
.cuhr-bar__val{font-variant-numeric:tabular-nums; font-weight:600; color:var(--cu-grey)}

/* ---------- toasts and dialogs ---------- */
.cuhr-toasts{position:fixed; right:1rem; bottom:1rem; z-index:300; display:grid; gap:.5rem; max-width:min(380px,92vw)}
.cuhr-toast{background:var(--cu-ink); color:#fff; padding:.8rem 1rem; border-radius:8px; box-shadow:var(--shadow-1);
  font-size:.9rem; border-left:4px solid var(--cuhr-green)}
.cuhr-dialog{border:0; border-radius:var(--radius); padding:0; width:min(720px,94vw); max-height:90vh; box-shadow:0 24px 70px rgba(0,0,0,.35)}
.cuhr-dialog::backdrop{background:rgba(20,6,5,.55)}
.cuhr-dialog__head{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.3rem;
  background:var(--cu-navy); color:#fff}
.cuhr-dialog__head h2{color:#fff; margin:0; font-size:1.1rem}
.cuhr-dialog__head button{background:transparent; border:0; color:#fff; font-size:1.5rem; cursor:pointer; line-height:1; min-width:44px; min-height:44px}
.cuhr-dialog__body{padding:1.2rem 1.3rem 1.4rem}

/* ---------- footer ---------- */
.cuhr-footer-motto{font:500 italic .95rem/1.4 var(--font-display); color:var(--cu-gold); margin:.9rem 0 0}
.footer__grid.cuhr-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
@media (max-width:820px){ .footer__grid.cuhr-footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer__grid.cuhr-footer__grid{grid-template-columns:1fr} }

/* ---------- workspace shell ---------- */
.ws-body{background:#F4F7F5}
.ws-top{background:var(--cu-surface); border-bottom:1px solid var(--cu-line); position:sticky; top:0; z-index:60}
.ws-top .wrap{max-width:none; display:flex; align-items:center; gap:1rem; min-height:68px}
.ws-top .brand__logo{height:40px; width:140px}
.ws-user{display:flex; align-items:center; gap:.7rem; font-size:.85rem; color:var(--cu-grey)}
.ws-user b{color:var(--cu-navy)}
.ws{display:grid; grid-template-columns:var(--cuhr-side) 1fr; min-height:calc(100vh - 68px)}
.ws-side{background:var(--cuhr-green); color:#fff; padding:1.1rem .75rem 2rem; position:sticky; top:68px;
  height:calc(100vh - 68px); overflow-y:auto}
.ws-side h2{font:700 .68rem/1 var(--font-text); letter-spacing:.16em; text-transform:uppercase; color:#D5E8DF;
  margin:1.1rem .6rem .5rem}
.ws-side h2:first-child{margin-top:.2rem}
.ws-side a{display:flex; align-items:center; color:#fff; text-decoration:none; padding:.7rem .65rem; min-height:44px;
  border-radius:8px; font:500 .87rem/1.25 var(--font-text)}
.ws-side a:hover{background:var(--cuhr-green-2)}
.ws-side a[aria-current="page"]{background:#fff; color:var(--cuhr-green); font-weight:700}
.ws-side a:focus-visible{outline:2px solid var(--cu-gold); outline-offset:1px}
.ws-main{padding:clamp(1.2rem,3vw,2.2rem); min-width:0}
.ws-head h1{font-size:clamp(1.5rem,2.6vw,2rem); margin:0; color:var(--cu-navy)}
.ws-head p{margin:.35rem 0 0; color:var(--cu-grey); font-size:.92rem; max-width:48rem}
.ws-kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.9rem; margin:1rem 0}
.ws-kpi{background:var(--cu-surface); border:1px solid var(--cu-line); border-radius:var(--radius); padding:1rem 1.1rem; border-top:3px solid var(--cuhr-green)}
.ws-kpi span{display:block; font:600 .74rem/1.3 var(--font-text); letter-spacing:.05em; text-transform:uppercase; color:var(--cu-grey)}
.ws-kpi b{display:block; font:600 1.35rem/1.3 var(--font-display); color:var(--cu-navy); margin-top:.3rem}
.ws-menu-btn{display:none}
@media (max-width:900px){
  .ws{grid-template-columns:1fr}
  .ws-side{position:fixed; inset:68px auto 0 0; width:min(300px,86vw); height:auto; z-index:70;
    transform:translateX(-100%); transition:transform .25s var(--ease); box-shadow:24px 0 60px rgba(0,0,0,.3)}
  .ws-side.open{transform:none}
  .ws-menu-btn{display:inline-flex}
}

/* ---------- public pages ---------- */
.cuhr-hero .cuhr-kicker,.cuhr-pagehead .cuhr-kicker{color:#F1E3DE}
.cuhr-pagehead .crumbs,.cuhr-pagehead .crumbs a,.cuhr-hero .crumbs,.cuhr-hero .crumbs a{color:#F1E3DE}
.cuhr-pagehead .crumbs a:hover,.cuhr-hero .crumbs a:hover{color:#fff}
a.cuhr-stage{text-decoration:none; color:inherit}
a.cuhr-stage:hover{border-color:var(--cuhr-green)}
a.cuhr-stage:focus-visible{outline:2px solid var(--cuhr-green); outline-offset:2px}
.cuhr-band{background:var(--cuhr-green-wash)}
.cuhr-quick{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.cuhr-quick a{display:flex; align-items:center; min-height:44px; padding:1rem 1.1rem; background:var(--cu-surface);
  border:1px solid var(--cu-line); border-radius:var(--radius); text-decoration:none; color:var(--cu-navy); font-weight:600}
.cuhr-quick a:hover{border-color:var(--cuhr-green)}
@media (max-width:720px){ .cuhr-quick{grid-template-columns:1fr} }
.cuhr-filters{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:0 0 1.2rem}
@media (max-width:720px){ .cuhr-filters{grid-template-columns:1fr} }
.cuhr-draft{background:#FFF4E0; border:1px solid #F2D9A6; border-left:4px solid #8A5A00; border-radius:var(--radius);
  padding:1rem 1.15rem; margin:0 0 1.2rem; color:var(--cu-ink)}
.cuhr-facts{display:grid; gap:.8rem}
.cuhr-facts > div{background:var(--cu-surface); border:1px solid var(--cu-line); border-radius:var(--radius); padding:1rem 1.1rem}
.cuhr-facts dt{font:600 .78rem/1.3 var(--font-text); letter-spacing:.04em; text-transform:uppercase; color:var(--cuhr-green); margin:0}
.cuhr-facts dd{margin:.35rem 0 0}
.cuhr-facts .src{display:block; margin-top:.4rem; color:var(--cu-grey); font-size:.8rem}
.cuhr-card{background:var(--cu-surface); border:1px solid var(--cu-line); border-radius:var(--radius); padding:1.15rem 1.2rem}
.cuhr-card h3{margin:0 0 .4rem; font-size:1.05rem}
.cuhr-card p{margin:.35rem 0 0; color:var(--cu-grey); font-size:var(--fs-small)}
.cuhr-list{margin:.4rem 0 0; padding-left:1.1rem}
.cuhr-list li{margin:.25rem 0}
.cuhr-prose h2{margin:2rem 0 .6rem; font-size:1.45rem}
.cuhr-prose h3{margin:1.4rem 0 .4rem; font-size:1.08rem}
.cuhr-prose p{max-width:44rem}

@media print{
  .topbar,.header,.cuhr-subnav,.footer,.ws-side,.ws-top,.cuhr-toasts,.btn{display:none!important}
  .ws{display:block} .ws-main{padding:0} body{background:#fff}
  .cuhr-table th{background:#fff!important; color:#000; border-bottom:2px solid #000}
}