/* Health Tech — the ontology, process integration and operating-intelligence
   page. Loaded only by health-tech.html; everything here is specific to it.
   Inherits the tokens from style.css (--ink, --cyan, --violet, --grad …). */

/* ---------- definition callout ---------- */
.ht-def {
  background: #fff; border: 1px solid var(--panel-brd); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow); max-width: 760px; margin: 28px auto 0;
  border-top: 4px solid transparent;
  border-image: linear-gradient(92deg, #20a8e0, #6d5df0) 1;
  border-image-slice: 1; border-width: 4px 1px 1px;
}
.ht-def .term { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; font-size: .78rem;
  color: #178fc4; margin-bottom: 8px; }
.ht-def p { margin: 0; font-size: 1.07rem; }

/* ---------- the interactive ontology graph ---------- */
.ht-graph-shell {
  background: linear-gradient(170deg, #0b1341 0%, #16205c 60%, #1b1b56 100%);
  border-radius: 22px; padding: 26px; color: #e9edff; position: relative;
  overflow: hidden; box-shadow: var(--shadow-lift);
}
.ht-graph-shell::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 20% 0%, rgba(32,168,224,.22), transparent 70%),
              radial-gradient(500px 280px at 85% 100%, rgba(141,109,243,.22), transparent 70%);
}
.ht-graph-head {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-bottom: 18px; position: relative; z-index: 2;
}
.ht-graph-head h3 { color: #fff; margin: 0; font-size: 1.15rem; }
.ht-graph-head p { margin: 4px 0 0; color: #9fb0e8; font-size: .88rem; }

.ht-head-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Copy-link. The selection lives in the URL, so a colleague opens the diagram
   on the same entity rather than on the default view with a note saying
   "click Visit". */
.ht-share {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #cdd8f7; border-radius: 999px; padding: 9px 16px; font: inherit;
  font-size: .8rem; font-weight: 700; letter-spacing: .5px; transition: .2s;
}
.ht-share:hover { background: rgba(255,255,255,.15); color: #fff; }
.ht-share.done { background: #1b8fc4; border-color: #49d0ff; color: #fff; }
.ht-share .ico { font-size: .95rem; line-height: 1; }
/* Only appears when the clipboard refuses. */
.ht-share-url {
  width: 100%; margin-top: 8px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3); color: #eaf0ff; border-radius: 9px;
  padding: 8px 11px; font-size: .8rem;
}

.ht-toggle { display: inline-flex; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 4px; }
.ht-toggle button {
  border: 0; background: transparent; color: #b9c6f0; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .6px;
  padding: 8px 16px; border-radius: 999px; transition: .2s;
}
.ht-toggle button[aria-pressed="true"] { background: #fff; color: #0b1341; }

.ht-graph-stage { position: relative; z-index: 2; }
.ht-graph { width: 100%; height: auto; display: block; touch-action: manipulation; }

/* Nodes. Dim everything, then un-dim what the selection touches. */
.ht-graph .lnk { stroke: rgba(160,180,240,.22); stroke-width: 1.1; fill: none;
  transition: stroke .25s, stroke-width .25s, opacity .25s; }
.ht-graph .node rect {
  transition: opacity .25s, filter .25s, stroke .25s;
  cursor: pointer; stroke-width: 1;
}
.ht-graph .node text {
  fill: #eef2ff; font-size: 11px; font-weight: 600; text-anchor: middle;
  pointer-events: none; transition: opacity .25s, fill .25s;
  font-family: 'Inter', system-ui, sans-serif;
}
.ht-graph .node.core text { font-size: 15px; fill: #fff; font-weight: 700; }

.ht-graph.has-sel .lnk { opacity: .12; }
.ht-graph.has-sel .lnk.on { opacity: 1; stroke: #49d0ff; stroke-width: 2.1; }
.ht-graph.has-sel .node { opacity: .26; }
.ht-graph.has-sel .node.on { opacity: 1; }
.ht-graph .node.sel rect { stroke: #fff; stroke-width: 2.5; }

/* Colour by layer, so the five layers read as five kinds of thing. */
.ht-graph .l-core rect { fill: #1b8fc4; stroke: #8fe3ff; stroke-width: 2; }
.ht-graph .l-care rect { fill: #35539c; stroke: rgba(160,190,255,.5); }
.ht-graph .l-org  rect { fill: #4b3f9e; stroke: rgba(190,175,255,.45); }
.ht-graph .l-ops  rect { fill: #11675c; stroke: rgba(150,235,215,.45); }
.ht-graph .l-meas rect { fill: #8a4e36; stroke: rgba(255,200,175,.45); }

.ht-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px;
  position: relative; z-index: 2; font-size: .82rem; color: #a9b7e6; }
.ht-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ht-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

.ht-readout {
  position: relative; z-index: 2; margin-top: 18px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px 18px;
  min-height: 92px;
}
.ht-readout h4 { color: #fff; margin: 0 0 6px; font-size: 1rem; }
.ht-readout p { margin: 0 0 10px; color: #b7c4ee; font-size: .9rem; }
.ht-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ht-chips b {
  background: rgba(73,208,255,.14); border: 1px solid rgba(73,208,255,.4);
  color: #9fe6ff; border-radius: 999px; padding: 4px 11px;
  font-size: .78rem; font-weight: 600;
}

/* Record view: the disconnected-cards state the toggle flips away from. */
.ht-records { display: grid; gap: 14px; position: relative; z-index: 2;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ht-records .rec {
  background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.26);
  border-radius: 13px; padding: 16px; color: #cfd9f7;
}
.ht-records .rec b { display: block; color: #fff; font-size: .92rem; margin-bottom: 6px; }
.ht-records .rec span { font-size: .8rem; color: #93a3d8; }
.ht-records-note { color: #9fb0e8; font-size: .88rem; margin: 16px 0 0;
  position: relative; z-index: 2; }

/* ---------- Mary Johnson story ---------- */
.ht-story { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.ht-story .cell {
  background: #fff; border: 1px solid var(--panel-brd); border-radius: 14px;
  padding: 17px 18px; box-shadow: var(--shadow); position: relative;
}
.ht-story .cell .lbl { font-size: .72rem; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: #178fc4; margin-bottom: 7px; }
.ht-story .cell p { margin: 0; font-size: .93rem; }
.ht-story .cell ul { margin: 0; padding-left: 17px; font-size: .9rem; color: var(--muted); }
.ht-story .cell li { margin-bottom: 3px; }

/* ---------- hierarchical relationship map ---------- */
.ht-tree { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); margin-top: 8px; }
.ht-branch {
  background: #fff; border: 1px solid var(--panel-brd); border-radius: 14px;
  padding: 18px; box-shadow: var(--shadow); border-top: 3px solid var(--cyan);
}
.ht-branch.b2 { border-top-color: #3f6fe4; }
.ht-branch.b3 { border-top-color: #6d5df0; }
.ht-branch.b4 { border-top-color: #159f8a; }
.ht-branch.b5 { border-top-color: #c1704f; }
.ht-branch h4 { margin: 0 0 11px; font-family: 'Space Grotesk', sans-serif;
  font-size: .95rem; letter-spacing: .2px; }
.ht-branch ul { list-style: none; margin: 0; padding: 0; }
.ht-branch li { font-size: .88rem; color: var(--muted); padding: 5px 0 5px 15px;
  position: relative; border-top: 1px solid #f0f3fa; }
.ht-branch li:first-child { border-top: 0; }
.ht-branch li::before { content: ''; position: absolute; left: 2px; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: #c8d3ec; }

/* ---------- the big vertical process flow ---------- */
.ht-flow { display: grid; gap: 0; max-width: 940px; margin: 0 auto; }
.ht-stage {
  background: #fff; border: 1px solid var(--panel-brd); border-radius: 16px;
  padding: 20px 24px; box-shadow: var(--shadow); display: grid;
  grid-template-columns: 148px 1fr; gap: 20px; align-items: center;
}
.ht-stage .nm { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; font-size: .84rem; color: var(--ink); }
.ht-stage .nm small { display: block; text-transform: none; letter-spacing: 0;
  font-weight: 500; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.ht-stage .items { display: flex; flex-wrap: wrap; gap: 7px; }
.ht-stage .items span {
  background: #f3f6fd; border: 1px solid #e2e8f6; border-radius: 8px;
  padding: 5px 11px; font-size: .83rem; color: #42506f;
}
.ht-arrow { justify-self: center; width: 2px; height: 26px;
  background: linear-gradient(#cdd8f0, #20a8e0); position: relative; }
.ht-arrow::after { content: ''; position: absolute; bottom: -1px; left: -4px;
  border: 5px solid transparent; border-top-color: #20a8e0; }

/* stage accent per step */
.ht-stage.s1 { border-left: 4px solid #20a8e0; }
.ht-stage.s2 { border-left: 4px solid #3b87e0; }
.ht-stage.s3 { border-left: 4px solid #4f6fe4; }
.ht-stage.s4 { border-left: 4px solid #6d5df0; }
.ht-stage.s5 { border-left: 4px solid #8257ec; }
.ht-stage.s6 { border-left: 4px solid #159f8a; }
.ht-stage.s7 { border-left: 4px solid #2f9b63; }
.ht-stage.s8 { border-left: 4px solid #c1704f; }

/* ---------- 10-step journey timeline ---------- */
.ht-rail { position: relative; margin-top: 30px; }
.ht-rail::before { content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(#20a8e0, #6d5df0); }
.ht-rail .leg { position: relative; padding: 0 0 22px 60px; }
.ht-rail .leg .dot {
  position: absolute; left: 11px; top: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; border: 2px solid #20a8e0; color: #0b1341;
  font-size: .72rem; font-weight: 700; display: grid; place-items: center;
  transition: .4s; z-index: 2;
}
.ht-rail .leg.in .dot { background: #20a8e0; color: #fff; border-color: #20a8e0;
  box-shadow: 0 0 0 5px rgba(32,168,224,.16); }
.ht-rail .leg h4 { margin: 0 0 3px; font-size: .97rem;
  font-family: 'Space Grotesk', sans-serif; }
.ht-rail .leg p { margin: 0; color: var(--muted); font-size: .91rem; }
.ht-rail .leg .who { display: inline-block; margin-top: 5px; font-size: .74rem;
  font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #178fc4; background: rgba(32,168,224,.1); border-radius: 6px; padding: 2px 8px; }

/* ---------- flywheel ---------- */
.ht-wheel-wrap { display: grid; gap: 28px; align-items: center;
  grid-template-columns: minmax(280px, 420px) 1fr; }
.ht-wheel { width: 100%; height: auto; }
.ht-wheel .seg { fill: #fff; stroke: var(--panel-brd); transition: .3s; }
.ht-wheel .seg:hover { fill: #eef4ff; }
.ht-wheel .sl { font-size: 10px; font-weight: 700; fill: var(--ink);
  text-anchor: middle; font-family: 'Inter', sans-serif; }
.ht-wheel .hub { fill: url(#htgrad); }
.ht-wheel .hubtext { fill: #fff; text-anchor: middle; font-weight: 700;
  font-family: 'Space Grotesk', sans-serif; }

/* ---------- screenshots in frames ---------- */
.ht-shotrow { display: grid; gap: 34px; align-items: center;
  grid-template-columns: 1.15fr .85fr; }
.ht-shotrow.flip { grid-template-columns: .85fr 1.15fr; }
.ht-shotrow.flip .ht-frame { order: 2; }

.ht-frame { border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--panel-brd); box-shadow: var(--shadow-lift); }
.ht-frame .bar { background: #e9eefa; border-bottom: 1px solid var(--panel-brd);
  padding: 9px 13px; display: flex; align-items: center; gap: 7px; }
.ht-frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: #c6d0e6;
  display: inline-block; }
.ht-frame .bar span { margin-left: 9px; font-size: .74rem; color: #74809c;
  background: #fff; border-radius: 6px; padding: 3px 11px; border: 1px solid #dde3f1; }
.ht-frame img { display: block; width: 100%; }

.ht-frame.phone { max-width: 290px; margin: 0 auto; border-radius: 26px;
  border: 8px solid #141c45; box-shadow: var(--shadow-lift); }
.ht-frame.phone img { border-radius: 0; }

.ht-callouts { list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; }
.ht-callouts li {
  font-size: .82rem; font-weight: 600; color: #2b3a5e; background: #fff;
  border: 1px solid var(--panel-brd); border-radius: 999px; padding: 6px 13px;
  box-shadow: 0 1px 4px rgba(11,19,65,.05);
}
.ht-callouts li::before { content: '▸'; color: #20a8e0; margin-right: 6px; }

/* ---------- hub and spoke ---------- */
.ht-hub { display: grid; gap: 20px; grid-template-columns: 1fr auto 1fr;
  align-items: center; }
.ht-hub .col { display: grid; gap: 8px; }
.ht-hub .col span {
  background: #fff; border: 1px solid var(--panel-brd); border-radius: 9px;
  padding: 8px 13px; font-size: .84rem; color: #42506f; box-shadow: var(--shadow);
}
.ht-hub .core {
  background: linear-gradient(165deg, #0b1341, #2a2f74); color: #fff;
  border-radius: 18px; padding: 24px 22px; min-width: 215px; text-align: center;
  box-shadow: var(--shadow-lift);
}
.ht-hub .core b { display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem; letter-spacing: .4px; margin-bottom: 12px; }
.ht-hub .core i { display: block; font-style: normal; font-size: .82rem;
  color: #a8b6e8; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.12); }
.ht-hub .core i:first-of-type { border-top: 0; }

/* ---------- comparison table ---------- */
.ht-compare { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.ht-compare .side { background: #fff; border: 1px solid var(--panel-brd);
  border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.ht-compare .side.now { border-top: 4px solid #b9c2d6; }
.ht-compare .side.next { border-top: 4px solid #20a8e0; }
.ht-compare h4 { margin: 0 0 4px; font-size: 1rem; }
.ht-compare .sub { color: var(--muted); font-size: .84rem; margin: 0 0 14px; }
.ht-compare ol { margin: 0; padding-left: 20px; }
.ht-compare li { font-size: .9rem; padding: 5px 0; color: #3c4a68; }
.ht-compare .side.now li { color: var(--muted); }

/* ---------- illustrative charts ---------- */
.ht-chart { background: #fff; border: 1px solid var(--panel-brd); border-radius: 16px;
  padding: 24px; box-shadow: var(--shadow); height: 100%; }
.ht-chart h4 { margin: 0 0 3px; font-size: 1rem; }
.ht-chart .tag { display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: #8a6d1f;
  background: #fdf4dc; border: 1px solid #f0dca8; border-radius: 6px;
  padding: 2px 8px; margin-bottom: 14px; }

.ht-funnel { display: grid; gap: 7px; }
.ht-funnel .bar { background: linear-gradient(92deg, #20a8e0, #6d5df0); color: #fff;
  border-radius: 8px; padding: 9px 14px; display: flex; justify-content: space-between;
  align-items: center; font-size: .86rem; font-weight: 600;
  margin: 0 auto; width: 100%; transition: width .8s ease; }
.ht-funnel .bar small { font-weight: 500; opacity: .85; }

.ht-bars { display: grid; gap: 11px; }
.ht-bars .row { display: grid; grid-template-columns: 112px 1fr 38px; gap: 11px;
  align-items: center; font-size: .87rem; }
.ht-bars .track { background: #eef2fb; border-radius: 7px; height: 13px; overflow: hidden; }
.ht-bars .fill { height: 100%; border-radius: 7px; width: 0; transition: width .9s ease; }
.ht-bars .n { text-align: right; font-weight: 700; }

.ht-metrics { display: grid; gap: 9px; }
.ht-metrics .m { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #f0f3fa; padding: 9px 0; font-size: .89rem; }
.ht-metrics .m:last-child { border-bottom: 0; }
.ht-metrics .m span { color: var(--muted); }
.ht-metrics .m b { color: var(--ink); font-size: .82rem; background: #f3f6fd;
  border: 1px solid #e2e8f6; border-radius: 6px; padding: 3px 9px; font-weight: 600; }

.ht-cap { display: grid; gap: 10px; }
.ht-cap .slab { border-radius: 10px; padding: 12px 15px; font-size: .88rem;
  display: flex; justify-content: space-between; align-items: center; }
.ht-cap .slab b { font-size: 1.15rem; }
.ht-cap .demand { background: #eef4ff; border: 1px solid #d8e3fb; color: #22407f; }
.ht-cap .home   { background: #e9f7f3; border: 1px solid #cfeae2; color: #126a58; }
.ht-cap .tele   { background: #f2effe; border: 1px solid #e0d9fb; color: #4b3a9e; }
.ht-cap .call   { background: #fdf6ec; border: 1px solid #f3e4c8; color: #7d5e1c; }
.ht-cap .none   { background: #f5f7fb; border: 1px solid #e6eaf4; color: #4a5672; }

/* ---------- knowledge-graph figure ---------- */
.ht-kg { background: #fff; border: 1px solid var(--panel-brd); border-radius: 18px;
  padding: 10px; box-shadow: var(--shadow); }
.ht-kg svg { width: 100%; height: auto; display: block; }
.ht-kg .e { stroke: #cdd8f0; stroke-width: 1.1; fill: none; }
.ht-kg .el { font-size: 6.4px; fill: #8794b4; font-weight: 600;
  font-family: 'Inter', sans-serif; letter-spacing: .3px; }
.ht-kg .n rect { fill: #fff; stroke: #d6dff0; }
.ht-kg .n text { font-size: 7.4px; fill: #2b3a5e; font-weight: 600;
  text-anchor: middle; font-family: 'Inter', sans-serif; }
.ht-kg .n.hero rect { fill: #0b1341; stroke: #0b1341; }
.ht-kg .n.hero text { fill: #fff; }
.ht-kg .n.cond rect { fill: #eef4ff; stroke: #c3d6f7; }
.ht-kg .n.org  rect { fill: #f3effe; stroke: #ddd3fa; }
.ht-kg .n.ops  rect { fill: #e9f7f3; stroke: #c9e7de; }
.ht-kg .n.out  rect { fill: #fdf3ec; stroke: #f2ddcb; }

/* ---------- dark Q&A ---------- */
.ht-dark { background: linear-gradient(165deg, #0b1341 0%, #1a2260 55%, #221f5e 100%);
  color: #e6ebff; position: relative; overflow: hidden; }
.ht-dark h2, .ht-dark h3 { color: #fff; }
.ht-dark .kicker { color: #6fd2ff; }
.ht-dark::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 300px at 15% 10%, rgba(32,168,224,.2), transparent 70%),
              radial-gradient(520px 280px at 88% 90%, rgba(141,109,243,.22), transparent 70%); }
.ht-dark .wrap { position: relative; z-index: 2; }
.ht-qa { display: grid; gap: 14px; margin-top: 26px; }
.ht-qa .qa { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px; padding: 20px 22px; }
.ht-qa .q { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #7fd8ff;
  font-size: .97rem; margin: 0 0 7px; }
.ht-qa .a { margin: 0; color: #c6d1f2; font-size: .96rem; }
.ht-chain { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  margin-top: 30px; }
.ht-chain span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #dbe3ff; border-radius: 999px; padding: 8px 18px; font-weight: 700;
  font-size: .8rem; letter-spacing: 1.2px; }
.ht-chain i { color: #6fd2ff; align-self: center; font-style: normal; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ht-shotrow, .ht-shotrow.flip { grid-template-columns: 1fr; }
  .ht-shotrow.flip .ht-frame { order: 0; }
  .ht-wheel-wrap { grid-template-columns: 1fr; }
  .ht-hub { grid-template-columns: 1fr; }
  .ht-hub .core { max-width: 340px; margin: 0 auto; }
  .ht-compare { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ht-stage { grid-template-columns: 1fr; gap: 12px; }
  .ht-graph-shell { padding: 16px; }
  .ht-rail .leg { padding-left: 50px; }
}

/* On a phone the graph is 300px wide and its labels come out around three
   pixels tall, which is not a diagram, it is a texture. Give it a floor and
   let the reader pan instead of shrinking forty labels into nothing.
   The base rule is declared first on purpose: put it after the media query
   and it wins on source order, which silently hides the hint it describes. */
.ht-pan-hint { display: none; color: #9fb0e8; font-size: .82rem; margin: 0 0 10px; }
@media (max-width: 760px) {
  #ht-stage-rel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ht-graph { min-width: 720px; }
  .ht-legend, .ht-readout { position: sticky; left: 0; }
  .ht-pan-hint { display: block; }
}