/* ============================================================
   SAFENTRA — HIRADC WORKSPACE STYLES (SIM 04)
   Wizard stepper, assessment calendar, job-step panels, risk
   calculator, comparison view, action/approval timelines.
   Extends the enterprise design system — no redesign.
   ============================================================ */

/* ---------- wizard form grid ---------- */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}
.fgrid .field.full{grid-column:1/-1}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}}

/* ---------- wizard stepper ---------- */
.hra-steps{display:flex;gap:6px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.hra-step{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:10px;border:1px solid var(--color-border);
  background:var(--color-surface-2);min-width:0;flex:1}
.hra-step .n{flex:none;width:24px;height:24px;border-radius:8px;background:var(--color-surface-3);color:var(--color-text-3);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.hra-step b{font-size:12.5px;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hra-step span{display:block;font-size:11px;color:var(--color-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hra-step.on{background:var(--blue-50,#EAF1FF);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(15,98,254,.12)}
.hra-step.on .n{background:var(--color-primary);color:#fff}
.hra-step.done .n{background:var(--color-ok,#0E9C8E);color:#fff}
.hra-step.done{border-color:rgba(14,156,142,.4)}

/* ---------- level chip + score cells ---------- */
.hra-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--lb);color:var(--lc);white-space:nowrap}
.hra-chip .d{width:7px;height:7px;border-radius:50%;background:var(--lc)}
.hra-score{font-variant-numeric:tabular-nums;font-weight:700}
.hra-arrow{color:var(--color-text-3);margin:0 4px}

/* ---------- activity cards ---------- */
.hra-actcard{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-surface-2);transition:border-color .15s, box-shadow .15s;height:100%}
.hra-actcard:hover{border-color:rgba(15,98,254,.45);box-shadow:0 4px 14px rgba(12,35,66,.07)}
.hra-actcard .tp{display:flex;gap:8px;align-items:center}
.hra-actcard .nm{font-size:13.5px;font-weight:700;line-height:1.35}
.hra-actcard .mt{font-size:11.5px;color:var(--color-text-3);display:flex;gap:8px;flex-wrap:wrap}
.hra-typeic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--tb);color:var(--tc)}

/* ---------- job step panels ---------- */
.hra-steppanel{border:1px solid var(--color-border);border-radius:12px;overflow:hidden;background:var(--color-surface-2)}
.hra-steppanel + .hra-steppanel{margin-top:10px}
.hra-sp-h{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--color-surface-3);cursor:pointer;user-select:none}
.hra-sp-h .num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.hra-sp-h b{font-size:13px}
.hra-sp-h .chev{margin-left:auto;color:var(--color-text-3);transition:transform .15s}
.hra-steppanel.open .hra-sp-h .chev{transform:rotate(180deg)}
.hra-sp-b{display:none;border-top:1px solid var(--color-border);padding:12px 14px}
.hra-steppanel.open .hra-sp-b{display:block}

/* ---------- calendar ---------- */
.hra-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.hra-cal .wd{font-size:11px;font-weight:700;color:var(--color-text-3);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px}
.hra-day{min-height:96px;border:1px solid var(--color-border);border-radius:10px;padding:6px;background:var(--color-surface-2);
  display:flex;flex-direction:column;gap:4px;overflow:hidden}
.hra-day.off{opacity:.45;background:var(--color-surface-1)}
.hra-day.today{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.hra-day .dn{font-size:11.5px;font-weight:700;color:var(--color-text-2)}
.hra-day.today .dn{color:var(--color-primary)}
.hra-ev{display:block;font-size:10.5px;line-height:1.3;padding:3px 6px;border-radius:6px;background:var(--hb,var(--blue-50,#EAF1FF));
  color:var(--hc,var(--color-primary));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.hra-ev:hover{filter:brightness(.95)}
.hra-more{font-size:10.5px;color:var(--color-text-3);padding:0 6px}

/* ---------- risk calculator ---------- */
.hra-calc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hra-calc .axis-h{font-size:12px;font-weight:700;color:var(--color-text-2);margin-bottom:6px}
.hra-calc .pick{display:flex;flex-direction:column;gap:6px}
.hra-calc .opt{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--color-border);border-radius:10px;
  cursor:pointer;background:var(--color-surface-2);text-align:left;width:100%}
.hra-calc .opt:hover{border-color:rgba(15,98,254,.4)}
.hra-calc .opt.on{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(15,98,254,.12)}
.hra-calc .opt .v{flex:none;width:22px;height:22px;border-radius:7px;background:var(--color-surface-3);display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:12px}
.hra-calc .opt.on .v{background:var(--color-primary);color:#fff}
.hra-calc .opt b{font-size:12.5px;display:block}
.hra-calc .opt span{font-size:11px;color:var(--color-text-3)}
.hra-calc .res{grid-column:1/-1;display:flex;gap:12px;align-items:center;justify-content:center;padding:14px;
  border:1px dashed var(--color-border);border-radius:12px;background:var(--color-surface-1)}
.hra-calc .res .bx{text-align:center}
.hra-calc .res .bx b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.hra-calc .res .bx span{font-size:11px;color:var(--color-text-3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}

/* ---------- comparison ---------- */
.hra-cmp{display:grid;grid-template-columns:1fr 44px 1fr;gap:12px;align-items:stretch}
.hra-cmp .mid{display:flex;align-items:center;justify-content:center;color:var(--color-text-3)}
.hra-cmp .side{border:1px solid var(--color-border);border-radius:12px;padding:14px;background:var(--color-surface-2)}
.hra-cmp .side h4{margin:0 0 10px;font-size:13px;display:flex;gap:8px;align-items:center}
.hra-cmp .kv2{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-top:1px dashed var(--color-border)}
.hra-delta{font-weight:800;font-variant-numeric:tabular-nums}
.hra-delta.up{color:var(--red-600,#D92D20)}
.hra-delta.dn{color:var(--color-ok,#0E9C8E)}
.hra-delta.eq{color:var(--color-text-3)}

/* ---------- bar pair (initial vs residual) ---------- */
.hra-pair{display:flex;flex-direction:column;gap:7px}
.hra-pair .ln{display:grid;grid-template-columns:86px 1fr 42px;gap:8px;align-items:center;font-size:11.5px}
.hra-pair .tr{height:9px;border-radius:5px;background:var(--color-surface-3);overflow:hidden;position:relative}
.hra-pair .fl{height:100%;border-radius:5px;background:var(--bc)}
.hra-pair .fl.ghost{position:absolute;left:0;top:0;opacity:.35;background:var(--gc,#98A2B3)}

/* ---------- action & approval timelines ---------- */
.hra-tl{position:relative;padding-left:22px}
.hra-tl:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--color-border)}
.hra-tl .it{position:relative;padding:0 0 16px}
.hra-tl .it:last-child{padding-bottom:0}
.hra-tl .dt{position:absolute;left:-22px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--color-surface-2);
  border:2px solid var(--dc,#0F62FE)}
.hra-tl .dt.fill{background:var(--dc,#0F62FE)}
.hra-tl b{font-size:13px;display:block}
.hra-tl .ds{font-size:12px;color:var(--color-text-3);margin-top:2px}
.hra-tl .ts{font-size:11px;color:var(--color-text-3);margin-top:3px;font-variant-numeric:tabular-nums}

/* ---------- team roster ---------- */
.hra-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hra-memb{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--color-border);border-radius:11px;
  background:var(--color-surface-2)}
.hra-memb .rl{font-size:10.5px;font-weight:800;color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em}

/* ---------- misc ---------- */
.hra-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 18px}
.hra-kv .kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--color-border);font-size:13px}
.hra-kv .kv span{color:var(--color-text-3)}
.hra-kv .kv b{text-align:right;font-weight:600}
.hra-hint{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--color-text-3);padding:9px 12px;
  border:1px dashed var(--color-border);border-radius:10px;background:var(--color-surface-1)}
.hra-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hra-grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.hra-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--color-text-3)}
.hra-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

@media (max-width:1024px){
  .hra-calc{grid-template-columns:1fr}
  .hra-cmp{grid-template-columns:1fr}
  .hra-cmp .mid{transform:rotate(90deg);padding:2px 0}
  .hra-step b{white-space:normal}
  .hra-day{min-height:74px}
}
@media (max-width:760px){
  .hra-steps{gap:4px}
  .hra-step span{display:none}
  .hra-day{min-height:58px;padding:4px}
  .hra-ev{font-size:9.5px;padding:2px 4px}
}