/* =========================================================
   Operational Intelligence — the hospital, not the patient.

   Prefix oi-, layered on pages/products/products.css (pr-), which
   carries the type scale, the sections, the product surface, the node
   and its connectors, the bar, the caveat note, the FAQ and the final
   CTA. What is page-local here is the DATA VOCABULARY, because this is
   the first page on the site whose subject is measurement.

   THE ONE IDEA THAT SHAPES EVERY NUMBER ON THE PAGE. A direction and a
   judgement are not the same thing. Footfall up 12% is good news;
   discharge TAT up 18% is bad news; both are an arrow pointing up. So
   .pr-trend carries the two separately — .up/.down/.flat draw the
   arrow, .good/.warn/.flat colour it — and anything that is a warning
   also says "above target" in words. A dashboard that paints every
   upward arrow green is lying about half its metrics.

   SECOND: every figure is also in the HTML as text. The bars and the
   graphs are drawn from --v and from SVG points, but no value exists
   only as a length. With the script gone, or under reduced motion, the
   page is a correct and complete table of numbers (§9.7).

   THIRD, AND THE BRIEF IS EXPLICIT: these are illustrative demo values,
   not claims about any hospital's performance. .pr-note says so under
   the hero, where the first numbers appear.

   ONE AUTO-PLAYER. The brief asks for five interactions — capacity,
   department, workforce, management, reporting. Five things moving on
   one page is the "excessive animation" its own design system forbids,
   so capacity cycles (it is the first product surface and sets the
   tone) and department, management and reporting are click-only. They
   are still real tab sets: ARIA, roving tabindex, arrows, Home and End.
   §9.6's contract is about screens that play themselves; the ones that
   wait for a click only owe the keyboard half of it.
   ========================================================= */

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


/* Measured, not guessed. Breaking after "operating" puts 724px into a
   485px column, so the break moves to after "hospital" and the two
   halves become 420 and 495 at 52u against a .9fr column of 509. The
   dim clause is the setup and the payoff carries the dash, which is
   where the sentence actually turns (§7.1). The command centre beside
   it loses 18px and still holds four KPI columns. */
.oi .pr-hero__cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }

.oi .pr-h1 { font-size: calc(52 * var(--u)); line-height: calc(63 * var(--u)); }


/* =========================================================
   THE NUMBER AND ITS DIRECTION
   ========================================================= */

/* the label reserves two lines whether it needs them or not. Without it,
   "Average waiting time" wraps and that one KPI's number sits a line
   lower than the three beside it — in a row of figures meant to be read
   across, a 13px step is the difference between a table and a jumble. */



/* direction and judgement, kept apart on purpose — see the header */



/* a warning never rests on the colour of an arrow */

/* =========================================================
   HERO — one operational interface, not a wall of widgets
   ========================================================= */
.oi-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(14 * var(--u)); padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid var(--rule); }


.oi-ui__split { display: grid; gap: calc(22 * var(--u)); }

.oi-ui__split + .oi-ui__split { margin-top: calc(22 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid var(--rule); }


/* the one alert on the screen */

/* .pr-sig__t, not a bare `.pr-sig p`: the kicker inside the card is a
   .pr-k and also a <p>, so at (0,1,1) this was quietly setting it in
   15.5u body type instead of 12u label type (§14.1) */



/* =========================================================
   THE FLOW — stages with a case travelling through them
   ========================================================= */
.oi-flow { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: start; }

.oi-flow > li { display: grid; justify-items: center; gap: calc(7 * var(--u)); padding: 0 calc(8 * var(--u)); text-align: center; }

.oi-flow__n { 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; }

.oi-flow__k { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }

/* the rail runs between the first and last stage centres, like .pr-time */
.oi-rail { position: relative; height: calc(26 * var(--u)); margin: calc(16 * var(--u)) 0 calc(4 * var(--u)); }

.oi-rail > i { position: absolute; top: calc(11 * var(--u)); left: calc(100% / 10); right: calc(100% / 10); height: 2px; background: var(--divider); }

.oi-rail > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand-ico); transition: width 1.5s var(--ease); }

.is-in .oi-rail > i::after { width: 100%; }

.oi-rail > b { position: absolute; top: calc(7 * var(--u)); left: calc(100% / 10); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 calc(3 * var(--u)) var(--brand-soft); opacity: 0; }

/* the dots travel ONCE when the section arrives. A loop would be the
   "constant motion" the brief rules out, and it would still be moving
   while somebody read the numbers under it. */
@media (prefers-reduced-motion: no-preference) {
  .is-in .oi-rail > b { animation: oiRun 1.9s var(--ease) var(--wd, 0ms) forwards; }
  @keyframes oiRun {
    0% { opacity: 0; transform: translateX(0); }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc(100vw)); }
  }
}


/* Reduced motion gets the finished rail, not an empty one (§9.8). The
   script strips .pr-js and never adds .is-in, so without this the flow
   runs under a grey line on exactly the readers who most need the
   stages joined up. The travelling dots stay hidden: they are pure
   decoration and a static dot means nothing. */
@media (prefers-reduced-motion: reduce) {
  .oi-rail > i::after { width: 100%; }
}


/* =========================================================
   BAR ROWS — label, how full, value
   ========================================================= */



/* the big one, beside the bars */
.oi-ring { display: grid; justify-items: center; gap: calc(6 * var(--u)); padding: calc(28 * var(--u)) calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--soft); text-align: center; }

.oi-ring__n { font-family: var(--font-head); font-size: calc(64 * var(--u)); line-height: calc(70 * var(--u)); font-weight: 500; letter-spacing: -.04em; color: var(--ink-num); font-variant-numeric: tabular-nums; }

.oi-ring .pr-bar { width: 100%; margin-top: calc(12 * var(--u)); }

.oi-ring dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); width: 100%; margin-top: calc(20 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); }

.oi-ring dt { font-size: calc(12 * var(--u)); color: var(--muted); }

.oi-ring dd { margin-top: calc(3 * var(--u)); font-size: calc(19 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }


/* the capacity switcher */



.oi-cap { display: grid; grid-template-columns: minmax(0, 1fr) calc(320 * var(--u)); gap: calc(28 * var(--u)); align-items: start; margin-top: calc(24 * var(--u)); }


/* =========================================================
   TURNAROUND — target against actual
   ========================================================= */




/* the pair is six children — label, bar, value, label, bar, value — so
   the labels are 1 and 4. :first-child caught only "Target" and left
   "Actual" set in sentence case beside it. */

/* =========================================================
   DEPARTMENTS — where the volume is, then how each performs
   ========================================================= */
.oi-dept { display: grid; grid-template-columns: minmax(0, 1fr) calc(330 * var(--u)); gap: calc(28 * var(--u)); align-items: start; }

.oi-rank { display: grid; }

.oi-rank > li { display: block; border-bottom: 1px solid var(--rule); }

.oi-rank > li:last-child { border-bottom: 0; }

.oi-rank button { display: grid; grid-template-columns: calc(120 * var(--u)) minmax(0, 1fr) calc(70 * var(--u)); align-items: center; column-gap: calc(16 * var(--u)); width: 100%; padding: calc(15 * var(--u)) calc(10 * var(--u)) calc(15 * var(--u)) 0; border: 0; border-left: 2px solid transparent; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }

.oi-rank button:hover { background: var(--grey); }

.oi-rank button[aria-selected="true"] { border-left-color: var(--brand-ico); background: var(--soft); padding-left: calc(12 * var(--u)); }

.oi-rank b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }

.oi-rank .v { text-align: right; font-size: calc(15.5 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }


.oi-card { display: grid; align-content: start; gap: calc(16 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }

.oi-card__head { display: grid; gap: calc(4 * var(--u)); padding-bottom: calc(15 * var(--u)); border-bottom: 1px solid var(--rule); }

.oi-card__head b { font-family: var(--font-head); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.03em; }





/* =========================================================
   WORKFORCE
   ========================================================= */
.oi-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: calc(40 * var(--u)); align-items: start; }

.oi-people { display: grid; gap: calc(14 * var(--u)); }

.oi-people > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(13 * var(--u)); padding-bottom: calc(14 * var(--u)); border-bottom: 1px solid var(--rule); }

.oi-people > li:last-child { border-bottom: 0; padding-bottom: 0; }

.oi-people b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }

.oi-people .v { text-align: right; font-size: calc(15 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }

.oi-people .v small { display: block; font-size: calc(12 * var(--u)); font-weight: 600; color: var(--muted); }

.oi-ratio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin-top: calc(22 * var(--u)); padding-top: calc(20 * var(--u)); border-top: 1px solid var(--rule); }

.oi-ratio > div { display: grid; gap: calc(4 * var(--u)); }

.oi-ratio em { font-style: normal; font-family: var(--font-head); font-size: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* The brief rules out "generic doctor-with-stethoscope stock images" by
   name and asks for operations or front-desk staff reviewing operational
   information. This frame is the only one we have of people actually
   working the systems — terminals, headsets, a screen and a pile of
   paper files, which is the argument of the section. Integration Hub
   uses the same file cropped tall and left; here it runs near its native
   landscape so the two read differently. */

/* =========================================================
   BED FLOW AND ITS BREAKDOWN
   ========================================================= */
.oi-ipd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(28 * var(--u)); align-items: start; }

/* one stacked bar: three parts of one 42-minute total */
.oi-stack { display: flex; height: calc(16 * var(--u)); margin-top: calc(14 * var(--u)); border-radius: 999px; overflow: hidden; background: var(--grey); }

.oi-stack > i { display: block; height: 100%; width: var(--w); transform-origin: left; }

.oi-stack > i:nth-child(1) { background: var(--brand-ico); }

.oi-stack > i:nth-child(2) { background: var(--brand); }

.oi-stack > i:nth-child(3) { background: var(--brand-soft); }

.pr-js .oi-stack > i { transform: scaleX(0); }

.pr-js .is-in .oi-stack > i { transform: scaleX(1); transition: transform .8s var(--ease) calc(var(--i, 0) * 180ms); }

.oi-key { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)) calc(20 * var(--u)); margin-top: calc(14 * var(--u)); }

.oi-key > li { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--text); }

.oi-key i { flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(3 * var(--u)); }

.oi-key > li:nth-child(1) i { background: var(--brand-ico); }

.oi-key > li:nth-child(2) i { background: var(--brand); }

.oi-key > li:nth-child(3) i { background: var(--brand-soft); border: 1px solid var(--brand-ico); }

.oi-key .v { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }


/* =========================================================
   CHARTS — SVG, and never the only place a value is stated
   ========================================================= */



@media (prefers-reduced-motion: no-preference) {
  /* the line draws itself once, then simply is the line */
  @keyframes oiDraw { from { stroke-dashoffset: 1000; } }
}

.oi-graph { display: grid; grid-template-columns: minmax(0, 1fr) calc(300 * var(--u)); gap: calc(28 * var(--u)); align-items: start; }





/* =========================================================
   REPORTING — distribution, not another graph
   ========================================================= */








.pr-to { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); margin-top: calc(18 * var(--u)); }


/* =========================================================
   Below 1180 --u is 1px. The brief: "do not simply shrink the desktop
   command center." Every two-column instrument stacks, the flow turns
   vertical, and the only thing allowed to scroll sideways is the
   management graph, which the brief asks for by name.
   ========================================================= */
@media (max-width: 1179px) {
  .oi .pr-hero__cols { grid-template-columns: minmax(0, 1fr); }
  .oi .pr-h1 { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }
  /* the flow runs down the page, each stage a step */
  .oi-flow { grid-auto-flow: row; }
  .oi-flow > li { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; justify-items: start; text-align: left; column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .oi-flow > li:last-child { border-bottom: 0; }
  .oi-flow__n { font-size: 22px; line-height: 28px; }
  .oi-rail { display: none; }
  .oi-cap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .oi-ring__n { font-size: 54px; line-height: 60px; }
  .oi-dept { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .oi-rank button { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .oi-rank .pr-bar { grid-column: 1 / -1; grid-row: 2; }
  /* a five-column table of numbers does not survive 375px; the same
     five rows do, as label / value pairs */
  .oi-work { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .oi-ratio { gap: 12px; }
  .oi-ipd { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* the brief asks for the graph to scroll rather than squash its labels */
  .oi-graph { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .oi-scroll { overflow-x: auto; scrollbar-width: none; }
  .oi-scroll::-webkit-scrollbar { display: none; }
}