/* ═══════════════════════════════════════════════════════════════════════════
   HR Playbook — its own layout.
   Deliberately standalone: this app does not load the Strategic, M&A, or NPD
   stylesheets, so nothing here can be silently restyled by a rule written for a
   stage-gate board, and nothing here can break them.
   Colours come from /assets/css/visionone-brand.css (--vo-*).
   ═══════════════════════════════════════════════════════════════════════════ */

.hr-app {
  --hr-side: 248px;
  --hr-radius: 8px;
  --hr-gap: 16px;
  --hr-shadow: 0 1px 2px rgba(31, 42, 36, .05), 0 4px 14px rgba(31, 42, 36, .06);
  /* Tier colours, reused by the assessment and every legend. Fixed to the brand set so a
     tier badge means the same thing on every screen. */
  --hr-t1: var(--vo-blue);
  --hr-t2: var(--vo-green-dark);
  --hr-t3: var(--vo-purple);
  /* Semantic severity, kept separate from the four value-proposition colours: those appear
     only in alignment contexts, so red always means "attention" everywhere else. */
  --hr-crit: var(--vo-red);
  --hr-crit-bg: var(--vo-red-soft, #fbe9e7);
  --hr-warn: #9a6b04;
  --hr-warn-bg: #fdf8e6;
  --hr-good: var(--vo-green);
  --hr-good-bg: var(--vo-green-tint);
  margin: 0;
  background: var(--vo-canvas);
  color: var(--vo-ink);
  font-family: var(--vo-font-body);
  /* THE LAYOUT SPINE. topnav.js inserts its header as body's FIRST CHILD with
     position: relative, so it occupies about 80px of real layout height. Anything below it
     sized at 100vh therefore overflows the viewport by exactly that much — the document starts
     scrolling and the inner pane's scrollbar track ends up below the fold, which is why the
     scrollbar appeared to be missing.
     Making body the flex column removes the guess: the topnav takes its natural height and
     .hr-shell takes precisely the remainder. dvh first for mobile browsers whose 100vh lies. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The `hidden` attribute must beat these components' own `display` rules.
   `[hidden] { display: none }` comes from the UA stylesheet, so ANY author `display`
   declaration overrides it — and both .hr-boot and .hr-shell set `display: grid`. Without this
   rule the boot overlay stays on screen after loading and the shell renders underneath it,
   which reads as "stuck loading" even though the app is fully working. */
.hr-app [hidden] { display: none !important; }

/* ── Boot ─────────────────────────────────────────────────────────────── */
.hr-boot { min-height: 70vh; display: grid; place-items: center; }
.hr-boot-inner { text-align: center; color: var(--vo-ink-soft); }
.hr-spinner {
  width: 30px; height: 30px; margin: 0 auto 14px;
  border: 3px solid var(--vo-border); border-top-color: var(--vo-green);
  border-radius: 50%; animation: hr-spin .8s linear infinite;
}
@keyframes hr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hr-spinner { animation-duration: 3s; } }

/* ── Shell ────────────────────────────────────────────────────────────── */
.hr-shell {
  display: grid; grid-template-columns: var(--hr-side) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;           /* required, or the grid refuses to shrink below its content */
}
@media (max-width: 900px) { .hr-shell { grid-template-columns: 1fr; } }

.hr-side {
  background: var(--vo-surface); border-right: 1px solid var(--vo-border);
  display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
  min-height: 0; overflow-y: auto;
}
@media (max-width: 900px) { .hr-side { overflow-y: visible; } }

.hr-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.hr-brand-mark {
  width: 34px; height: 34px; border-radius: 7px; flex: none;
  background: var(--vo-green); color: #fff;
  font-family: var(--vo-font-heading); font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
}
.hr-brand-name { font-family: var(--vo-font-heading); font-size: 15.5px; line-height: 1.2; }
.hr-brand-sub { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--vo-ink-soft); margin-top: 2px; }

.hr-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.hr-nav-btn {
  appearance: none; text-align: left; width: 100%; cursor: pointer;
  font-family: var(--vo-font-body); font-size: 13.5px; font-weight: 600;
  padding: 9px 11px; border: 0; border-radius: 6px;
  background: transparent; color: var(--vo-ink-soft);
}
.hr-nav-btn:hover:not(:disabled) { background: var(--vo-canvas); color: var(--vo-ink); }
.hr-nav-btn.is-active { background: var(--vo-green-tint); color: var(--vo-green-dark); }
.hr-nav-btn:disabled { opacity: .45; cursor: not-allowed; }
.hr-nav-btn:focus-visible, .hr-app button:focus-visible, .hr-app [tabindex]:focus-visible,
.hr-app input:focus-visible, .hr-app select:focus-visible, .hr-app textarea:focus-visible {
  outline: 2.5px solid var(--vo-green); outline-offset: 2px;
}

.hr-side-foot { margin-top: auto; padding: 12px 8px 4px; font-size: 11px; color: var(--vo-ink-soft); }
.hr-role { margin-bottom: 6px; }
.hr-vo { opacity: .7; }

/* ── Top bar + the scrolling pane ─────────────────────────────────────────
   .hr-main is a flex COLUMN that does not scroll. The top bar is a fixed-height row, and
   #hrScroll is the only scrolling box. That way the bar is permanently at the top of the pane
   and content scrolls past below it, never under it — a sticky bar lets content slide
   underneath, which reads as the bar covering what you were reading. */
.hr-main {
  min-width: 0; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
@media (max-width: 900px) {
  /* On a narrow screen the sidebar stacks above, so a 100vh pane would push the content off
     the bottom. Let the document scroll instead. */
  /* Stacked layout: let the document scroll rather than a pane. */
  .hr-shell { flex: 0 0 auto; }
  .hr-main { overflow: visible; }
  .hr-scroll { overflow: visible !important; }
}
.hr-scroll {
  flex: 1 1 auto;
  min-height: 0;                 /* required, or a flex item refuses to shrink below content */
  overflow-y: scroll;            /* `scroll`, not `auto`: always reserve the track so the
                                    layout never shifts when content grows past the fold */
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: var(--vo-green) var(--vo-green-tint);
  /* Breathing room so the last section is not flush against the bottom edge. Set here rather
     than on .hr-views, whose `padding` shorthand appears later and would override it. */
  padding-bottom: 90px;
}
.hr-scroll::-webkit-scrollbar { width: 12px; }
.hr-scroll::-webkit-scrollbar-track { background: var(--vo-green-tint); border-radius: 6px; }
.hr-scroll::-webkit-scrollbar-thumb {
  background: var(--vo-green); border-radius: 6px;
  border: 2px solid var(--vo-green-tint);
}
.hr-scroll::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark); }
.hr-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 30px); background: var(--vo-surface);
  border-bottom: 1px solid var(--vo-border);
  /* Static, not sticky: .hr-main does not scroll, so the bar cannot scroll away. */
  flex: 0 0 auto; position: static; z-index: 12;
}
.hr-topbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hr-topbar-right { margin-left: auto; }
.hr-topbar h1 { font-family: var(--vo-font-heading); font-size: 19px; margin: 0; }
.hr-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px; background: var(--vo-canvas);
  border: 1px solid var(--vo-border); color: var(--vo-ink-soft); white-space: nowrap;
}
.hr-chip-phase { background: var(--vo-blue-tint); border-color: var(--vo-blue); color: var(--vo-blue-dark); }
.hr-save { font-size: 12px; color: var(--vo-ink-soft); }
.hr-save.is-saving { color: var(--vo-blue-dark); }
.hr-save.is-saved { color: var(--vo-green-dark); }
.hr-save.is-error { color: var(--hr-crit); font-weight: 700; }

.hr-error {
  margin: 14px clamp(16px, 3vw, 30px) 0; padding: 12px 15px;
  background: var(--hr-crit-bg); border-left: 3px solid var(--hr-crit);
  border-radius: 0 5px 5px 0; font-size: 14px; color: var(--vo-ink);
}

.hr-views { padding: clamp(16px, 3vw, 30px); min-width: 0; }

/* ── Generic blocks ───────────────────────────────────────────────────── */
.hr-card {
  background: var(--vo-surface); border: 1px solid var(--vo-border);
  border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); padding: 18px 20px 20px;
}
.hr-view > h2 {
  font-family: var(--vo-font-heading); font-size: 22px; margin: 0 0 4px;
}
.hr-view > .hr-lede { color: var(--vo-ink-soft); font-size: 15px; margin: 0 0 20px; max-width: 74ch; }
.hr-grid { display: grid; gap: var(--hr-gap); }
.hr-grid.cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hr-sec-title {
  font-family: var(--vo-font-heading); font-size: 16px; margin: 26px 0 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hr-muted { color: var(--vo-ink-soft); }
.hr-empty {
  padding: 26px; text-align: center; color: var(--vo-ink-soft);
  border: 1px dashed var(--vo-border); border-radius: var(--hr-radius); background: var(--vo-surface);
}

/* Stat tiles */
.hr-stats { display: grid; gap: var(--hr-gap); grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.hr-stat { background: var(--vo-surface); border: 1px solid var(--vo-border); border-radius: var(--hr-radius); padding: 14px 16px 16px; }
.hr-stat .v { font-family: var(--vo-font-heading); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.hr-stat .l { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--vo-ink-soft); margin-top: 6px; }
.hr-stat .d { font-size: 12px; color: var(--vo-ink-soft); margin-top: 5px; }
.hr-stat.is-crit { border-left: 3px solid var(--hr-crit); }
.hr-stat.is-good { border-left: 3px solid var(--hr-good); }

/* Maturity meter — a 1-5 ladder, not a percentage. Percentages imply a denominator
   that maturity does not have. */
.hr-meter { display: flex; gap: 3px; margin-top: 8px; }
.hr-meter i {
  height: 7px; flex: 1; border-radius: 2px; background: var(--vo-border); display: block;
}
.hr-meter i.on { background: var(--vo-green); }
.hr-meter i.target { box-shadow: inset 0 0 0 1.5px var(--vo-ink); }

/* Tables */
.hr-tablewrap { overflow-x: auto; border: 1px solid var(--vo-border); border-radius: var(--hr-radius); background: var(--vo-surface); }
.hr-app table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.hr-app th, .hr-app td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--vo-border); vertical-align: top; }
.hr-app thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--vo-ink-soft); background: var(--vo-canvas); position: sticky; top: 0;
}
.hr-app tbody tr:last-child td { border-bottom: 0; }
.hr-app td.n, .hr-app th.n { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr-prose { font-size: 12.8px; color: var(--vo-ink-soft); line-height: 1.5; max-width: 42ch; }

/* Buttons */
.hr-btn {
  appearance: none; cursor: pointer; font-family: var(--vo-font-body);
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--vo-border); background: var(--vo-surface); color: var(--vo-ink);
}
.hr-btn:hover:not(:disabled) { border-color: var(--vo-ink-soft); }
.hr-btn:disabled { opacity: .5; cursor: not-allowed; }
.hr-btn.primary { background: var(--vo-green); border-color: var(--vo-green-dark); color: #fff; }
.hr-btn.primary:hover:not(:disabled) { background: var(--vo-green-dark); }
.hr-btn.small { font-size: 12px; padding: 5px 10px; }
.hr-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Tier + status badges */
.hr-tier {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px;
  font-size: 11.5px; font-weight: 700; color: #fff; flex: none;
  font-family: ui-monospace, Consolas, monospace;
}
.hr-tier.t1 { background: var(--hr-t1); }
.hr-tier.t2 { background: var(--hr-t2); }
.hr-tier.t3 { background: var(--hr-t3); }
.hr-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; border: 1px solid currentColor; white-space: nowrap;
}
.hr-badge.crit { color: var(--hr-crit); background: var(--hr-crit-bg); }
.hr-badge.warn { color: var(--hr-warn); background: var(--hr-warn-bg); }
.hr-badge.good { color: var(--vo-green-dark); background: var(--hr-good-bg); }
.hr-badge.flat { color: var(--vo-ink-soft); background: var(--vo-canvas); border-color: var(--vo-border); }

/* ── Assessment runner ───────────────────────────────────────────────── */
.hr-ctl {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 12px 15px; background: var(--vo-surface); border: 1px solid var(--vo-border);
  border-radius: var(--hr-radius); position: sticky; top: 0; z-index: 10;
  box-shadow: var(--hr-shadow); margin-bottom: 16px;
}
.hr-ctl .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vo-ink-soft); }
.hr-ctl select, .hr-ctl input[type=search] {
  font-family: var(--vo-font-body); font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--vo-border); border-radius: 5px; background: var(--vo-surface); color: var(--vo-ink);
}
.hr-ctl .count { margin-left: auto; font-size: 12px; color: var(--vo-ink-soft); font-variant-numeric: tabular-nums; }
.hr-pill {
  appearance: none; cursor: pointer; font-family: var(--vo-font-body);
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--vo-border); background: var(--vo-surface); color: var(--vo-ink-soft);
}
.hr-pill[aria-pressed=true] { background: var(--vo-ink); border-color: var(--vo-ink); color: var(--vo-canvas); }

.hr-domain { margin: 22px 0; }
.hr-domain-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.hr-domain-head h3 { font-family: var(--vo-font-heading); font-size: 17px; margin: 0; }
.hr-domain-head .lens { font-size: 12.8px; color: var(--vo-ink-soft); flex: 1 1 260px; }
.hr-domain-head .score { font-family: var(--vo-font-heading); font-size: 19px; font-variant-numeric: tabular-nums; }

.hr-subhead {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vo-green-dark); background: var(--vo-green-tint);
  padding: 6px 12px; border-top: 1px solid var(--vo-border);
}
.hr-item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px;
  padding: 12px; border-top: 1px solid var(--vo-border); align-items: start;
}
.hr-item.is-crit { background: linear-gradient(90deg, var(--hr-crit-bg) 0 3px, transparent 3px); }
.hr-item .q { min-width: 0; }
.hr-item .stmt { font-size: 13.8px; }
.hr-item .probe { font-size: 12.8px; color: var(--vo-ink-soft); margin-top: 5px; }
.hr-item .ev { font-size: 12.2px; color: var(--vo-ink-soft); margin-top: 5px; opacity: .9; }
.hr-item .qk {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vo-ink-soft); opacity: .8;
}
.hr-item .note {
  width: 100%; margin-top: 8px; font-family: var(--vo-font-body); font-size: 13px;
  padding: 7px 9px; border: 1px solid var(--vo-border); border-radius: 5px;
  background: var(--vo-canvas); color: var(--vo-ink); resize: vertical; min-height: 34px;
}

/* The score control — 1-5 radio group rendered as a segmented scale. Radios rather than a
   select so a consultant can score with the keyboard while talking, and so the whole scale
   is visible: a dropdown hides the anchors, which are the reason the score means anything. */
.hr-scale { display: flex; gap: 3px; align-items: center; }
.hr-scale button {
  appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 5px;
  border: 1px solid var(--vo-border); background: var(--vo-surface); color: var(--vo-ink-soft);
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 700;
}
.hr-scale button:hover { border-color: var(--vo-ink-soft); }
.hr-scale button[aria-pressed=true] { background: var(--vo-green); border-color: var(--vo-green-dark); color: #fff; }
.hr-scale .clear { width: auto; padding: 0 7px; font-size: 11px; font-family: var(--vo-font-body); font-weight: 600; }
.hr-scale-wrap { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.hr-scale-hint { font-size: 10.5px; color: var(--vo-ink-soft); }
@media (max-width: 700px) {
  .hr-item { grid-template-columns: 26px minmax(0, 1fr); }
  .hr-scale-wrap { grid-column: 2; align-items: flex-start; }
}

/* Maturity anchor reference, shown inline while scoring a domain */
.hr-anchors { margin: 8px 0 4px; }
.hr-anchors summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--vo-blue-dark); }
.hr-anchors ol { list-style: none; margin: 10px 0 0; padding: 0; }
.hr-anchors li {
  display: grid; grid-template-columns: 22px 96px minmax(0, 1fr); gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--vo-border); font-size: 12.8px; align-items: baseline;
}
.hr-anchors .lv { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--vo-green-dark); text-align: center; }
.hr-anchors .ln { font-weight: 700; font-size: 12px; }
.hr-anchors .lt { color: var(--vo-ink-soft); line-height: 1.45; }
@media (max-width: 620px) { .hr-anchors li { grid-template-columns: 22px minmax(0, 1fr); } .hr-anchors .lt { grid-column: 2; } }

/* ── Alignment matrix ─────────────────────────────────────────────────── */
.hr-align td.delta { font-variant-numeric: tabular-nums; text-align: center; font-weight: 700; }
.hr-status-aligned { color: var(--vo-green-dark); }
.hr-status-gap { color: var(--hr-warn); }
.hr-status-critical-gap { color: var(--hr-crit); }
.hr-status-over-invested { color: var(--vo-purple); }
.hr-status-not-assessed { color: var(--vo-ink-soft); }
.hr-align tr.row-critical-gap { background: var(--hr-crit-bg); }
.hr-align tr.row-over-invested { background: var(--vo-purple-soft, #efe9f5); }

/* Tier bars — the say-do / provability read */
.hr-tiers3 { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.hr-tbar { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--vo-ink-soft); }
.hr-tbar .k { width: 34px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; flex: none; }
.hr-tbar .t { height: 8px; border-radius: 2px; flex: none; min-width: 2px; }
.hr-tbar .v { font-variant-numeric: tabular-nums; }
.hr-tbar.t1 .t { background: var(--hr-t1); }
.hr-tbar.t2 .t { background: var(--hr-t2); }
.hr-tbar.t3 .t { background: var(--hr-t3); }

/* Findings */
.hr-finding {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px;
  padding: 14px 16px; border-top: 1px solid var(--vo-border);
}
.hr-finding:first-child { border-top: 0; }
.hr-finding .kind { align-self: start; }
.hr-finding .f { font-size: 14px; }
.hr-finding .w { font-size: 12.8px; color: var(--vo-ink-soft); margin-top: 4px; max-width: 72ch; }
.hr-finding .route { font-size: 11.5px; color: var(--vo-blue-dark); margin-top: 6px; }
.hr-finding.p1 { background: var(--hr-crit-bg); }

/* ── Group roll-up ────────────────────────────────────────────────────── */
.hr-floor {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 15px 18px; border-radius: var(--hr-radius);
  background: var(--hr-crit-bg); border-left: 3px solid var(--hr-crit);
}
.hr-floor .big { font-family: var(--vo-font-heading); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.hr-floor .t { font-size: 13.5px; max-width: 70ch; }
.hr-spread { display: flex; align-items: center; gap: 7px; min-width: 130px; }
.hr-spread .track { position: relative; height: 8px; flex: 1; background: var(--vo-border); border-radius: 2px; }
.hr-spread .span { position: absolute; height: 8px; background: var(--vo-blue); border-radius: 2px; }
.hr-spread .lo, .hr-spread .hi { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--vo-ink-soft); }

.hr-playbook-group { margin: 20px 0; }
.hr-playbook-group > h3 {
  font-family: var(--vo-font-heading); font-size: 16px; margin: 0 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.hr-sec {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-top: 1px solid var(--vo-border);
}
.hr-sec .name { font-size: 14px; font-weight: 700; }
.hr-sec .hint { font-size: 12.6px; color: var(--vo-ink-soft); margin-top: 3px; max-width: 74ch; }
.hr-sec select {
  font-family: var(--vo-font-body); font-size: 12px; padding: 4px 7px;
  border: 1px solid var(--vo-border); border-radius: 5px; background: var(--vo-surface); color: var(--vo-ink);
}

@media print {
  .hr-side, .hr-ctl, .hr-topbar-right { display: none; }
  .hr-shell { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dictation
   ═══════════════════════════════════════════════════════════════════════════ */
/* The wrapper is the positioning context for the mic. `block` for a textarea so it keeps its
   own line; `inline-block` for the rare opted-in single-line field. */
.hr-mic-field { position: relative; display: block; }
.hr-mic-field.inline { display: inline-block; width: 100%; }
.hr-mic {
  position: absolute; top: 5px; right: 6px;
  appearance: none; cursor: pointer; width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--vo-border); border-radius: 5px;
  background: var(--vo-surface); color: var(--vo-ink-soft);
  opacity: .55; transition: opacity .12s, border-color .12s;
}
.hr-mic-field:hover .hr-mic, .hr-mic:focus-visible { opacity: 1; }
.hr-mic:hover { border-color: var(--vo-green); color: var(--vo-green-dark); }
/* Listening is a state that must be unmistakable — a consultant needs to know at a glance
   whether the mic is still live while they are talking to a client. */
.hr-mic.listening {
  opacity: 1; background: var(--vo-red); border-color: var(--vo-red); color: #fff;
  animation: hr-pulse 1.4s ease-in-out infinite;
}
@keyframes hr-pulse { 50% { box-shadow: 0 0 0 5px rgba(199, 49, 39, .22); } }
@media (prefers-reduced-motion: reduce) { .hr-mic.listening { animation: none; box-shadow: 0 0 0 3px rgba(199, 49, 39, .3); } }
/* Room for the mic so it never sits on top of the first line of text. */
.hr-mic-field textarea { padding-right: 34px !important; }
.hr-mic-field.inline input { padding-right: 34px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   AI assist
   ═══════════════════════════════════════════════════════════════════════════ */
.hr-assist {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--vo-border);
}
.hr-assist-head { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.hr-assist-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--vo-purple); background: var(--vo-purple-soft, #efe9f5);
  border: 1px solid var(--vo-purple); border-radius: 3px; padding: 2px 6px;
}
.hr-assist-out {
  margin-top: 11px; padding: 13px 15px; border-radius: 6px;
  background: var(--vo-canvas); border: 1px solid var(--vo-border); font-size: 13.4px;
}
.hr-assist-out.is-err { background: var(--hr-crit-bg); border-color: var(--hr-crit); }
.hr-assist-out.is-draft { border-left: 3px solid var(--vo-purple); }
.hr-assist-out ul { margin: 5px 0 10px; padding-left: 19px; }
.hr-assist-out li { margin: 3px 0; max-width: 76ch; }
.hr-assist-out p { margin: 5px 0 10px; max-width: 76ch; }
.hr-assist-h {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vo-ink-soft); margin: 9px 0 3px;
}
.hr-assist-h.warn, .hr-assist-out ul.warn li { color: var(--hr-warn); }
.hr-assist-note {
  font-size: 11.8px; color: var(--vo-ink-soft); margin-top: 9px;
  padding-top: 8px; border-top: 1px solid var(--vo-border); max-width: 76ch;
}
.hr-draft-text {
  width: 100%; font-family: var(--vo-font-body); font-size: 13.4px;
  padding: 9px 11px; border: 1px solid var(--vo-border); border-radius: 6px;
  background: var(--vo-surface); color: var(--vo-ink); resize: vertical;
}
.hr-example { padding: 10px 0; border-top: 1px solid var(--vo-border); }
.hr-example:first-of-type { border-top: 0; }
.hr-example-h { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.hr-example-b { font-size: 13.2px; color: var(--vo-ink-soft); margin-bottom: 7px; max-width: 76ch; white-space: pre-wrap; }
.hr-badge.ai { color: var(--vo-purple); background: var(--vo-purple-soft, #efe9f5); }

/* ═══════════════════════════════════════════════════════════════════════════
   Deeper-inquiry (probe) panel
   ═══════════════════════════════════════════════════════════════════════════ */
.hr-probe {
  margin: 10px 0 0; border: 1px solid var(--vo-border); border-radius: 6px;
  background: var(--vo-surface);
}
/* A triggered escalation is a finding in its own right, so it gets a severity stripe rather
   than sitting quietly like a collapsed helper. */
.hr-probe.has-rules { border-left: 3px solid var(--hr-warn); }
.hr-probe-head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 9px 13px; background: var(--vo-canvas); border-radius: 5px 5px 0 0;
}
.hr-probe-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--vo-ink-soft);
}
.hr-probe-body { padding: 12px 15px; border-top: 1px solid var(--vo-border); }
.hr-probe-rule, .hr-probe-ai { padding: 10px 0; border-top: 1px solid var(--vo-border); }
.hr-probe-rule:first-child, .hr-probe-ai:first-child { border-top: 0; padding-top: 2px; }
.hr-probe-rule-h { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.hr-probe-why { font-size: 12.4px; color: var(--vo-ink-soft); margin: 5px 0; max-width: 76ch; }
.hr-probe-q { font-size: 13.8px; margin: 6px 0 4px; max-width: 76ch; }
.hr-probe-rule ul { margin: 6px 0 0; padding-left: 19px; }
.hr-probe-rule li { font-size: 13.2px; margin: 4px 0; max-width: 76ch; }
.hr-probe-verdict {
  font-size: 13.4px; font-style: italic; color: var(--vo-ink);
  padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--vo-border); max-width: 76ch;
}
.hr-probe-answer {
  width: 100%; margin-top: 7px; font-family: var(--vo-font-body); font-size: 13px;
  padding: 7px 9px; border: 1px solid var(--vo-border); border-radius: 5px;
  background: var(--vo-canvas); color: var(--vo-ink); resize: vertical;
}