/* ============================================================
   Octane Agentic Platform — 2026-10-29: Health (seventh department)
   Loaded AFTER octane-platform-20261014.css on the Platform page and
   the Health page, and after octane-platform-20261010.css on Explore
   Agents. Same tokens, same brand rules.
   ============================================================ */

/* Health page: six visit stages */
.oc-pipe--6 { grid-template-columns: repeat(6, 1fr); }
.oc-pipe--6 .oc-pipe__step { padding: 22px 20px 24px; }
.oc-pipe--6 .oc-pipe__step p { font-size: 14px; }

/* Platform: KPI band with six departments */
.oc-kpiband__grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.oc-kpiband__grid--6 .oc-kpicol { padding: 16px 15px 6px; }
.oc-kpiband__grid--6 .oc-kpi3 b { font-size: 28px; }
.oc-kpiband__grid--6 .oc-kpi3 span { font-size: 13.5px; }
.oc-kpiband__grid--6 .oc-kpicol__head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; }
.oc-kpiband__grid--6 .oc-kpicol__head .oc-label { white-space: nowrap; letter-spacing: .1em; }
.oc-kpiband__grid--6 .oc-kpicol__head a { font-size: 13px; white-space: nowrap; }

/* Platform: control plane with seven departments (13 inputs/outputs; Health lane full width under the others) */
@media (min-width: 1101px) {
  .oc-cp--7 .oc-cp__row, .oc-cp--7 .oc-cp__wires { grid-template-columns: repeat(13, 1fr); gap: 6px; }
  .oc-cp--7 .oc-cp__node { padding: 7px 4px; }
  .oc-cp--7 .oc-cp__node b { font-size: 12.5px; }
  .oc-cp--7 .oc-cp__node small { font-size: 11px; }
}
.oc-cp--7 .oc-cp__lane[data-d="health"] { grid-column: 1 / -1; }
.oc-cp[data-show="health"] [data-d]:not([data-d~="health"]) { opacity: .18; }
.oc-cp[data-show="health"] :is(.oc-cp__node, .oc-cp__lane)[data-d~="health"] { border-color: #000; }
html[data-theme="dark"] .oc-cp[data-show="health"] :is(.oc-cp__node, .oc-cp__lane)[data-d~="health"] { border-color: #fff; }

/* Platform: seven department cards, 4 on top, 3 below */
.oc-depts--7 { grid-template-columns: repeat(12, 1fr); }
.oc-depts--7 .oc-dept { grid-column: span 3; padding: 28px; min-height: 250px; }
.oc-depts--7 .oc-dept:nth-child(n+5) { grid-column: span 4; }
.oc-depts--7 .oc-dept h3 { max-width: 88%; }
.oc-depts--7 .oc-dept p { font-size: 16px; }

/* Explore Agents: with seven views the department switch is wider than tablets and phones; it scrolls inside itself
   (the selected tab is scrolled into view) instead of widening the page */
.oc-switch { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.oc-switch::-webkit-scrollbar { display: none; }
.oc-switch button { flex: none; }

@media (max-width: 1100px) {
  .oc-pipe--6 { grid-template-columns: repeat(3, 1fr); }
  .oc-kpiband__grid--6 { grid-template-columns: repeat(3, 1fr); }
  .oc-depts--7 { grid-template-columns: 1fr 1fr; }
  .oc-depts--7 .oc-dept, .oc-depts--7 .oc-dept:nth-child(n+5) { grid-column: auto; }
  .oc-depts--7 .oc-dept:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .oc-pipe--6, .oc-kpiband__grid--6, .oc-depts--7 { grid-template-columns: 1fr; }
}

/* Explore Agents: the finance card grid kept four columns down to phones and widened the page (seen 30 Oct, also on
   live); two columns on tablets, one on phones */
@media (max-width: 900px) { .oc-catalog .oc-cards, .oc-catalog .oc-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .oc-catalog .oc-cards, .oc-catalog .oc-cards--4 { grid-template-columns: minmax(0, 1fr); } }