/* =========================================================
   Healthcare Intelligence (MIS) — the umbrella.

   Prefix hi-, layered on pages/products/products.css (pr-), which now
   carries the whole data vocabulary: the KPI and its trend chip, the
   meter row, the target-versus-actual pair, the comparison table, the
   charts, the signal card, the report preview and its scheduler, the
   pill group and the range control. This page is the second user of
   all of it and writes barely any chart CSS of its own, which is the
   return on three rounds of promotion.

   WHAT THIS PAGE IS NOT. It is the executive entry point to Patient,
   Operational and Business Intelligence, and the brief is explicit
   three times over that it must not reproduce their detail. So there
   is no capacity analysis, no TAT breakdown, no payer mix: each of the
   three layers gets four words and a link to the page that owns it.
   Everything else here is about what only an umbrella can do — put
   them side by side, compare periods and locations, drill from the
   group down to a doctor, and say in one paragraph what changed.

   DIRECTION IS NOT JUDGEMENT, same as everywhere else that shows a
   number: .pr-trend draws the arrow, .good/.warn decide whether it is
   news, and anything that is a warning also says so in words.
   ========================================================= */

.hi { --ink-num: #1b1b1b; }

/* No size override, and that is the measured answer rather than the
   assumed one. "Turn hospital data into intelligence" is 672px against
   the shared column's 485, so this headline cannot be two lines at any
   size an H1 should be — 54u would need a 672px column and 485px needs
   39u. At the house 64u it breaks into three lines of 415, 377 and 422
   against 485: balanced, no orphan, and the same size as every other
   product page. Three good lines beat two forced ones. */

/* =========================================================
   THE STREAMS — five sources converging on one layer
   ========================================================= */
.hi-streams { display: grid; grid-template-columns: calc(230 * var(--u)) calc(90 * var(--u)) minmax(0, 1fr); align-items: center; column-gap: 0; }
.hi-src { display: grid; gap: calc(9 * var(--u)); }
.hi-src > li { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); background: #fff; font-size: calc(14.5 * var(--u)); font-weight: 600; }
.hi-src .i { color: var(--faint); }
/* the bracket: five short leads into one spine into one arm. Drawn the
   same way .pr-fan draws its legs, turned on its side. */
.hi-join { position: relative; align-self: stretch; }
.hi-join > i { position: absolute; background: var(--divider); }
.hi-join > i:nth-child(-n+5) { left: 0; width: 40%; height: 2px; }
.hi-join > i:nth-child(1) { top: 10%; }
.hi-join > i:nth-child(2) { top: 30%; }
.hi-join > i:nth-child(3) { top: 50%; }
.hi-join > i:nth-child(4) { top: 70%; }
.hi-join > i:nth-child(5) { top: 90%; }
.hi-join > i:nth-child(6) { left: calc(40% - 1px); top: 10%; bottom: 10%; width: 2px; }
.hi-join > i:nth-child(7) { left: 40%; right: 0; top: calc(50% - 1px); height: 2px; }
.is-in .hi-join > i { background: var(--brand-ico); transition: background .5s var(--ease) var(--wd, 0ms); }
.is-in .hi-join > i:nth-child(6) { transition-delay: calc(var(--wd, 0ms) + 240ms); }
.is-in .hi-join > i:nth-child(7) { transition-delay: calc(var(--wd, 0ms) + 420ms); }

/* the layer everything arrives at */
.hi-core { display: grid; justify-items: center; gap: calc(7 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)); border: 2px solid var(--brand-ico); border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--brand-soft); text-align: center; }
.hi-core b { font-family: var(--font-head); font-size: calc(21 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.hi-core .pr-k { color: var(--brand-ink); }

/* the three counts the hero and the summary both end on */
.hi-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.hi-counts > li { display: grid; gap: calc(3 * var(--u)); }
.hi-counts b { font-family: var(--font-head); font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 500; letter-spacing: -.03em; color: var(--ink-num); font-variant-numeric: tabular-nums; }
.hi-counts .warn b { color: var(--amber-ink); }
.hi-counts .on b { color: var(--brand-ink); }

/* =========================================================
   02 THE THREE LAYERS
   ========================================================= */
.hi-layers { display: grid; justify-items: center; width: 100%; }
.hi-layer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(28 * var(--u)); row-gap: calc(14 * var(--u)); width: 100%; max-width: calc(880 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.hi-layer:hover, .hi-layer:focus-within { border-color: var(--brand-ico); box-shadow: 0 2px 4px rgba(17, 19, 24, .07), 0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-20 * var(--u)) rgba(17, 19, 24, .18); transform: translateY(calc(-2 * var(--u))); }
.hi-layer h3 { font-family: var(--font-head); font-size: calc(26 * var(--u)); line-height: calc(33 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.hi-layer > div > p { margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--prose); }
/* the four words each layer owns. The brief asks for these on hover;
   they are always here instead, because a hover-only reveal is a reveal
   that never happens on a phone and never happens by keyboard. The
   hover still does something — the card lifts — it just is not the only
   way to read the page. */
.hi-tags { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); margin-top: calc(14 * var(--u)); }
.hi-tags > li { padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--grey); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--text); }
.hi-layer .pr-link { white-space: nowrap; }

/* =========================================================
   03 THE EXECUTIVE INTERFACE
   ========================================================= */
.hi-bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)) calc(26 * var(--u)); padding-bottom: calc(18 * var(--u)); border-bottom: 1px solid var(--rule); }
.hi-bar > div { display: grid; gap: calc(6 * var(--u)); }
.hi-fresh { margin-left: auto; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.hi-fresh::before { content: ""; flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--brand-ico); }
.hi-exec { display: grid; grid-template-columns: minmax(0, 1fr) calc(336 * var(--u)); gap: calc(24 * var(--u)); align-items: start; margin-top: calc(22 * var(--u)); }
.hi-att { display: grid; gap: calc(10 * var(--u)); }
.hi-att > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: calc(11 * var(--u)); padding: calc(13 * var(--u)) calc(15 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--grey); font-size: calc(14.5 * var(--u)); font-weight: 600; }
.hi-att .warn { background: var(--amber); color: var(--amber-ink); }
.hi-att .on { background: var(--brand-soft); color: var(--brand-ink); }
.hi-att .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); align-self: center; }
.hi-att small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; opacity: .8; }

/* =========================================================
   04 THE DRILL-DOWN
   ========================================================= */
.hi-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)); }
.hi-crumb button { padding: calc(8 * var(--u)) calc(14 * var(--u)); border: 1px solid transparent; border-radius: 999px; background: none; font: inherit; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.hi-crumb button:hover { color: var(--ink); background: var(--grey); }
.hi-crumb button[aria-selected="true"] { border-color: var(--brand-ico); background: var(--brand-soft); color: var(--brand-ink); }
.hi-crumb span { flex: none; color: var(--divider); }

/* =========================================================
   07 DATA TO INSIGHT — the number, and why
   ========================================================= */
.hi-whys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--u)); }
.hi-why { display: grid; align-content: start; gap: calc(11 * var(--u)); padding: calc(26 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.hi-why__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(10 * var(--u)); font-family: var(--font-head); font-size: calc(36 * var(--u)); line-height: calc(42 * var(--u)); font-weight: 500; letter-spacing: -.035em; color: var(--ink-num); font-variant-numeric: tabular-nums; }
.hi-why__q { padding-top: calc(13 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
/* .hi-why__a, not `.hi-why > p`: the card's other three paragraphs are
   .pr-fl, .hi-why__v and .hi-why__q, and a child selector at (0,1,1)
   was quietly setting all three in 15u prose (§14.1) */
.hi-why__a { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--prose); }
.hi-why__v small { font-family: var(--font-body); font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* =========================================================
   09 THE MANAGEMENT SUMMARY — editorial, not a card
   ========================================================= */
.hi-sum { max-width: calc(880 * var(--u)); }
.hi-sum p { font-family: var(--font-head); font-size: calc(27 * var(--u)); line-height: calc(38 * var(--u)); font-weight: 500; letter-spacing: -.028em; color: var(--muted); }
.hi-sum p + p { margin-top: calc(18 * var(--u)); }
.hi-sum b { font-weight: 500; color: var(--ink); }
.hi-sum .hi-counts { margin-top: calc(40 * var(--u)); padding-top: calc(28 * var(--u)); border-top: 1px solid var(--rule); max-width: calc(640 * var(--u)); }

/* =========================================================
   10 THE CONNECTED SYSTEMS
   ========================================================= */
.hi-eco { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); max-width: calc(820 * var(--u)); }
.hi-eco > li { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: calc(9 * var(--u)); background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; }
.hi-eco .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--faint); }

/* =========================================================
   MOTION (§9) — and the count-up (§9.7)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hi-join > i { background: var(--brand-ico); }
}
@media (prefers-reduced-motion: no-preference) {
  .hi-exec .pr-panel:not([hidden]) .pr-kpi__v,
  .hi-exec .pr-panel:not([hidden]) .hi-att > li { animation: hiRise .45s var(--ease) var(--wd, 0ms) backwards; }
  @keyframes hiRise { from { opacity: 0; transform: translateY(5px); } }
  .hi-period.is-cycling .pr-pill[aria-selected="true"] .bar > i { animation: hiFill 6200ms linear forwards; }
  @keyframes hiFill { to { transform: scaleX(1); } }
}

/* =========================================================
   Below 1180 --u is 1px. The brief: "do not simply shrink the desktop
   interface." The streams turn into a column, the layers stack, the
   executive view becomes one column, and the comparison table is
   already handled by .pr-table upstairs.
   ========================================================= */
@media (max-width: 1179px) {
  .hi .pr-h1 { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }

  /* five sources, a short stem, then the layer — straight down */
  .hi-streams { grid-template-columns: minmax(0, 1fr); row-gap: 0; justify-items: center; }
  .hi-src { width: 100%; max-width: 320px; }
  .hi-join { align-self: auto; width: 2px; height: 26px; justify-self: center; }
  .hi-join > i:nth-child(-n+5) { display: none; }
  .hi-join > i:nth-child(6) { left: 0; top: 0; bottom: 0; width: 2px; }
  .hi-join > i:nth-child(7) { display: none; }
  .hi-core { width: 100%; max-width: 320px; }
  .hi-counts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hi-counts b { font-size: 22px; line-height: 28px; }

  .hi-layer { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .hi-layer h3 { font-size: 21px; line-height: 28px; }
  .hi-layer .pr-link { justify-self: start; }

  .hi-bar { gap: 14px; }
  .hi-fresh { margin-left: 0; }
  .hi-exec { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .hi-crumb { gap: 2px; }
  .hi-crumb button { padding: 7px 11px; font-size: 13px; }

  .hi-whys { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hi-why { padding: 20px; }
  .hi-why__v { font-size: 30px; line-height: 36px; }

  .hi-sum p { font-size: 20px; line-height: 30px; }
  .hi-sum .hi-counts { margin-top: 26px; padding-top: 20px; }
  .hi-eco { justify-content: flex-start; }
}