@hippo-digital/hippocampus 1.0.0-rc.1

package/assets/hippocampus.scss

@@ -0,0 +1,896 @@
+// Visual identity for the Hippocampus knowledge-base pages, deliberately
+// distinct from the citizen-facing NHS.UK look (see docs/colour-pairings.md
+// for the accent colour source). Scoped to .knowledge-admin-theme, a body
+// class set only by create-router.js's middleware - /patient and /policy
+// prototype screens don't get this class, so they keep the standard look.
+.knowledge-admin-theme {
+  background: #f6f5f2;
+  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+}
+
+.knowledge-admin-theme .nhsuk-header {
+  background: #1c1c1a;
+}
+
+.knowledge-admin-theme h1,
+.knowledge-admin-theme h2,
+.knowledge-admin-theme h3,
+.knowledge-admin-theme h4 {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.knowledge-admin-theme .nhsuk-caption-l {
+  color: #706f68;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.knowledge-admin-theme a {
+  color: #00726b;
+}
+
+.knowledge-admin-theme .nhsuk-back-link,
+.knowledge-admin-theme .nhsuk-back-link__icon {
+  color: #00726b;
+}
+
+.knowledge-admin-theme .knowledge-card,
+.knowledge-admin-theme .knowledge-section,
+.knowledge-admin-theme .knowledge-blueprint-step,
+.knowledge-admin-theme .knowledge-linked-block {
+  background: #ffffff;
+  border-color: #e3e1d9;
+  border-radius: 3px;
+  box-shadow: none;
+}
+
+.knowledge-admin-theme .knowledge-card__meta,
+.knowledge-admin-theme .knowledge-muted {
+  color: #8c8a80;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+  font-size: 12px;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.knowledge-admin-theme .nhsuk-button {
+  background: #1c1c1a;
+  border-radius: 2px;
+}
+
+.knowledge-admin-theme .nhsuk-button--secondary {
+  background: transparent;
+  border-color: #1c1c1a;
+  color: #1c1c1a;
+}
+
+.knowledge-admin-theme .nhsuk-tag {
+  border-radius: 2px;
+}
+
+.knowledge-admin-theme code {
+  background: #e6f6f5;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+}
+
+.knowledge-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.knowledge-list {
+  display: grid;
+  gap: 16px;
+}
+
+.knowledge-card,
+.knowledge-section,
+.knowledge-blueprint-step {
+  border: 1px solid #d8dde0;
+  padding: 24px;
+  margin-bottom: 24px;
+  background: #ffffff;
+}
+
+// Cards, linked blocks, timeline items and the page lede are all prose, not
+// tables or grids - they stay readable inside the fluid-width container by
+// capping at a comfortable measure, same as the blueprint and trace fixes.
+.knowledge-card,
+.knowledge-linked-block,
+.knowledge-timeline__item,
+.knowledge-admin-theme .nhsuk-lede-text {
+  max-width: 70ch;
+}
+
+// Several pages (users, scenarios, research, project) put paragraphs and
+// bulleted/numbered prose lists directly inside a section rather than a
+// card - cap those too. `.nhsuk-list--bullet`/`--number` are shared NHS.UK
+// classes that a host prototype also uses, so they are scoped to the
+// knowledge-admin-theme body class rather than applied everywhere.
+.knowledge-section > p,
+.knowledge-admin-theme .nhsuk-list--bullet,
+.knowledge-admin-theme .nhsuk-list--number {
+  max-width: 70ch;
+}
+
+.knowledge-card__meta {
+  color: #4c6272;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.knowledge-timeline {
+  list-style: none;
+  padding-left: 0;
+}
+
+.knowledge-timeline__item {
+  border-left: 4px solid #005eb8;
+  padding-left: 24px;
+  margin-bottom: 32px;
+}
+
+.knowledge-admin-theme .knowledge-timeline__item {
+  border-left-color: #00726b;
+}
+
+.knowledge-blueprint-step__header {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.knowledge-lane {
+  border-top: 1px solid #d8dde0;
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 24px;
+  padding: 16px 0;
+}
+
+// An author stylesheet's `display` always wins over the browser's default
+// `[hidden] { display: none }` UA rule, regardless of selector specificity -
+// so setting `display: grid` above silently breaks the `hidden` attribute
+// unless it's overridden again explicitly here.
+.knowledge-lane[hidden] {
+  display: none;
+}
+
+.knowledge-lane__label h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.knowledge-lane__content {
+  // Keep prose readable even inside the fluid-width container - a wide
+  // table benefits from the extra space, but a paragraph stretched across
+  // 100+ characters per line doesn't.
+  max-width: 70ch;
+}
+
+.knowledge-lane__content > :last-child {
+  margin-bottom: 0;
+}
+
+.knowledge-boundary {
+  border-top: 2px dashed #005eb8;
+  color: #005eb8;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding-top: 8px;
+  text-transform: uppercase;
+}
+
+.knowledge-admin-theme .knowledge-boundary {
+  border-top-color: #00726b;
+  color: #00726b;
+}
+
+.knowledge-tagged-item {
+  border-left: 4px solid #768692;
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  background: #f0f4f5;
+}
+
+.knowledge-tagged-item strong {
+  display: block;
+  font-size: 14px;
+}
+
+.knowledge-tagged-item--high {
+  border-left-color: #d5281b;
+  background: #fbeae5;
+}
+
+.knowledge-tagged-item--medium {
+  border-left-color: #ffb81c;
+  background: #fff9e6;
+}
+
+// Orange, dark / Orange pairings from docs/colour-pairings.md - a clear
+// dark-to-light severity progression that doesn't reuse Warm yellow, which
+// already means Journey/Screen/Decision in the graph and trace views.
+.knowledge-admin-theme .knowledge-tagged-item--high {
+  border-left-color: #8e5300;
+  background: #fdf3e6;
+}
+
+.knowledge-admin-theme .knowledge-tagged-item--medium {
+  border-left-color: #ed8b00;
+  background: #fdf3e6;
+}
+
+.knowledge-linked-block {
+  border-top: 1px solid #d8dde0;
+  padding-top: 24px;
+  margin-top: 24px;
+}
+
+.knowledge-linked-block:first-of-type {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.knowledge-linked-block__detail {
+  background: #f0f4f5;
+  margin: 24px 0;
+  padding: 16px;
+}
+
+.knowledge-graph-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin: 24px 0;
+}
+
+.knowledge-graph-summary div {
+  background: #f0f4f5;
+  border-left: 4px solid #005eb8;
+  padding: 12px;
+}
+
+// Aqua green, dark post-it + tint pairing from docs/colour-pairings.md,
+// used together the way the reference sheet intends (accent + matching
+// light fill), rather than just swapping the accent colour alone.
+.knowledge-admin-theme .knowledge-graph-summary div {
+  background: #e6f6f5;
+  border-left-color: #00726b;
+}
+
+.knowledge-graph-summary strong,
+.knowledge-graph-summary span {
+  display: block;
+}
+
+.knowledge-graph-summary strong {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.knowledge-graph-summary span {
+  color: #4c6272;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.knowledge-graph {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.knowledge-graph__node {
+  border: 1px solid #d8dde0;
+  border-top: 4px solid #768692;
+  padding: 12px;
+}
+
+.knowledge-graph__node strong,
+.knowledge-graph__node span {
+  display: block;
+}
+
+.knowledge-graph__node strong {
+  color: #4c6272;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.knowledge-graph__node span {
+  font-size: 16px;
+}
+
+.knowledge-graph__node--user {
+  border-top-color: #005eb8;
+}
+
+.knowledge-graph__node--scenario {
+  border-top-color: #d5281b;
+}
+
+.knowledge-graph__node--need {
+  border-top-color: #007f3b;
+}
+
+.knowledge-graph__node--evidence {
+  border-top-color: #7c2855;
+}
+
+// User, Evidence, and Journey/Screen/Decision already match NHS blue, Dark
+// pink and Warm yellow from docs/colour-pairings.md, so only Scenario (not
+// in the palette at all) and Need (close but not exact) need adjusting.
+.knowledge-admin-theme .knowledge-graph__node--scenario {
+  border-top-color: #330072;
+}
+
+.knowledge-admin-theme .knowledge-graph__node--need {
+  border-top-color: #006747;
+}
+
+.knowledge-graph__node--journey,
+.knowledge-graph__node--screen,
+.knowledge-graph__node--decision {
+  border-top-color: #ffb81c;
+}
+
+.knowledge-edge-list {
+  display: grid;
+  gap: 8px;
+}
+
+.knowledge-edge-list li {
+  background: #f0f4f5;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 12px;
+  padding: 12px;
+}
+
+.knowledge-edge-list span {
+  color: #4c6272;
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.knowledge-trace-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 16px 24px;
+  margin-bottom: 0;
+}
+
+.knowledge-trace-controls__field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 320px;
+}
+
+.knowledge-trace-controls__field .nhsuk-label {
+  margin-bottom: 4px;
+}
+
+.knowledge-trace-controls__submit {
+  margin: 0;
+}
+
+.knowledge-trace-timeline,
+.knowledge-trace-children {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.knowledge-trace-timeline {
+  position: relative;
+}
+
+.knowledge-trace-timeline::before {
+  background: #005eb8;
+  bottom: 0;
+  content: "";
+  left: 13px;
+  position: absolute;
+  top: 8px;
+  width: 4px;
+}
+
+.knowledge-trace-group,
+.knowledge-trace-item {
+  position: relative;
+}
+
+.knowledge-trace-group {
+  padding-left: 48px;
+}
+
+.knowledge-trace-group__content {
+  margin-bottom: 24px;
+}
+
+.knowledge-trace-group__content h3 {
+  margin-bottom: 16px;
+}
+
+.knowledge-trace-children {
+  display: grid;
+  gap: 16px;
+}
+
+.knowledge-trace-children .knowledge-trace-children {
+  border-left: 2px solid #d8dde0;
+  margin-top: 16px;
+  padding-left: 24px;
+}
+
+.knowledge-trace-item {
+  padding-left: 48px;
+}
+
+.knowledge-trace-item__marker {
+  background: #ffffff;
+  border: 4px solid #005eb8;
+  border-radius: 50%;
+  height: 20px;
+  left: 3px;
+  position: absolute;
+  top: 4px;
+  width: 20px;
+}
+
+.knowledge-trace-children .knowledge-trace-item__marker {
+  border-color: #768692;
+}
+
+.knowledge-trace-item__content {
+  max-width: 70ch;
+  border-top: 1px solid #d8dde0;
+  padding: 16px 0 8px;
+}
+
+.knowledge-trace-item--selected .knowledge-trace-item__content {
+  background: #f0f4f5;
+  border-left: 4px solid #005eb8;
+  border-top: 0;
+  margin: 8px 0 32px;
+  padding: 16px;
+}
+
+.knowledge-trace-item--selected .knowledge-trace-item__marker {
+  background: #005eb8;
+}
+
+.knowledge-admin-theme .knowledge-trace-timeline::before {
+  background: #00726b;
+}
+
+.knowledge-admin-theme .knowledge-trace-item__marker {
+  border-color: #00726b;
+}
+
+// Higher specificity than the rule above, so nested/child markers stay
+// grey (their existing, deliberate "seen before" treatment) rather than
+// picking up the teal accent meant for top-level trace items.
+.knowledge-admin-theme .knowledge-trace-children .knowledge-trace-item__marker {
+  border-color: #768692;
+}
+
+.knowledge-admin-theme .knowledge-trace-item--selected .knowledge-trace-item__content {
+  border-left-color: #00726b;
+}
+
+.knowledge-admin-theme .knowledge-trace-item--selected .knowledge-trace-item__marker {
+  background: #00726b;
+}
+
+.knowledge-trace-item__date {
+  color: #4c6272;
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.knowledge-trace-item__heading {
+  font-size: 22px;
+  margin: 0 0 8px;
+}
+
+.knowledge-trace-item__type {
+  display: inline-block;
+  padding: 2px 10px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+  background: #768692;
+  border-radius: 12px;
+}
+
+.knowledge-trace-item__type--user {
+  background: #005eb8;
+}
+
+.knowledge-trace-item__type--scenario {
+  background: #d5281b;
+}
+
+.knowledge-trace-item__type--need {
+  background: #007f3b;
+}
+
+.knowledge-admin-theme .knowledge-trace-item__type--scenario {
+  background: #330072;
+}
+
+.knowledge-admin-theme .knowledge-trace-item__type--need {
+  background: #006747;
+}
+
+.knowledge-trace-item__type--evidence {
+  background: #7c2855;
+}
+
+.knowledge-trace-item__type--journey,
+.knowledge-trace-item__type--screen,
+.knowledge-trace-item__type--decision {
+  color: #212b32;
+  background: #ffb81c;
+}
+
+.knowledge-trace-item__relationship {
+  color: #4c6272;
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+
+.knowledge-trace-item__relationship strong {
+  color: #212b32;
+}
+
+.knowledge-muted {
+  color: #4c6272;
+}
+
+// Confidence is its own high/medium/low scale, not a severity - a
+// deliberately different colour family (blue/teal, not orange) from
+// .knowledge-tagged-item so the two ratings don't read as the same thing
+// when they appear near each other. See docs/colour-pairings.md.
+.knowledge-confidence-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 13px;
+  font-weight: 700;
+  border-radius: 10px;
+}
+
+.knowledge-confidence-tag--high {
+  color: #00726b;
+  background: #e6f6f5;
+}
+
+.knowledge-confidence-tag--medium {
+  color: #00758f;
+  background: #e6f6fa;
+}
+
+.knowledge-confidence-tag--low {
+  color: #4c6272;
+  background: #f0f4f5;
+}
+
+.knowledge-matrix-wrap {
+  overflow-x: auto;
+}
+
+.knowledge-matrix {
+  border-collapse: collapse;
+  min-width: 1200px;
+  width: 100%;
+}
+
+.knowledge-matrix th,
+.knowledge-matrix td {
+  border: 1px solid #d8dde0;
+  padding: 12px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.knowledge-matrix thead th,
+.knowledge-matrix tbody th {
+  background: #f0f4f5;
+}
+
+.knowledge-matrix__boundary td {
+  border-top: 2px dashed #005eb8;
+  color: #005eb8;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.knowledge-admin-theme .knowledge-matrix__boundary td {
+  border-top-color: #00726b;
+  color: #00726b;
+}
+
+.knowledge-blueprint-controls {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 24px;
+  align-items: flex-start;
+  padding: 12px 0;
+  margin-bottom: 24px;
+  background: #fff;
+  border-bottom: 1px solid #d8dde0;
+}
+
+.knowledge-blueprint-controls__lenses {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.knowledge-lens-btn {
+  padding: 6px 14px;
+  font: inherit;
+  color: #005eb8;
+  background: #fff;
+  border: 2px solid #005eb8;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.knowledge-lens-btn[aria-pressed="true"] {
+  color: #fff;
+  background: #005eb8;
+}
+
+.knowledge-admin-theme .knowledge-lens-btn {
+  color: #00726b;
+  border-color: #00726b;
+}
+
+.knowledge-admin-theme .knowledge-lens-btn[aria-pressed="true"] {
+  background: #00726b;
+}
+
+.knowledge-blueprint-controls__lanes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.knowledge-blueprint-controls__lanes legend {
+  width: 100%;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.knowledge-lane-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.knowledge-blueprint-layout {
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  gap: 24px;
+}
+
+.knowledge-blueprint-minimap {
+  position: sticky;
+  top: 64px;
+  align-self: start;
+}
+
+.knowledge-blueprint-minimap ul {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.knowledge-blueprint-minimap ul::before {
+  position: absolute;
+  top: 16px;
+  bottom: 16px;
+  left: 15px;
+  width: 2px;
+  content: "";
+  background: #d8dde0;
+}
+
+.knowledge-blueprint-minimap li {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.knowledge-blueprint-minimap a {
+  position: relative;
+  display: block;
+}
+
+.knowledge-blueprint-minimap__marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-weight: 700;
+  color: #005eb8;
+  background: #fff;
+  border: 2px solid #005eb8;
+  border-radius: 50%;
+}
+
+.knowledge-blueprint-minimap a.is-active .knowledge-blueprint-minimap__marker {
+  color: #fff;
+  background: #005eb8;
+}
+
+.knowledge-admin-theme .knowledge-blueprint-minimap__marker {
+  color: #00726b;
+  border-color: #00726b;
+}
+
+.knowledge-admin-theme .knowledge-blueprint-minimap a.is-active .knowledge-blueprint-minimap__marker {
+  background: #00726b;
+}
+
+.knowledge-blueprint-step {
+  scroll-margin-top: 88px;
+}
+
+.knowledge-flow-diagram {
+  overflow-x: auto;
+  padding: 24px;
+  margin-bottom: 24px;
+  background: #ffffff;
+  border: 1px solid #d8dde0;
+}
+
+.knowledge-flow-source {
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.knowledge-admin-theme .knowledge-flow-diagram {
+  border-color: #e3e1d9;
+  border-radius: 3px;
+}
+
+@media (max-width: 48.0525em) {
+  .knowledge-blueprint-layout {
+    display: block;
+  }
+
+  .knowledge-blueprint-minimap {
+    position: static;
+    margin-bottom: 16px;
+  }
+
+  .knowledge-blueprint-minimap ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .knowledge-blueprint-minimap ul::before {
+    display: none;
+  }
+
+  .knowledge-blueprint-minimap li {
+    margin-bottom: 0;
+  }
+
+  .knowledge-lane {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .knowledge-edge-list li {
+    grid-template-columns: 1fr;
+  }
+
+  .knowledge-trace-controls {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .knowledge-trace-timeline::before {
+    left: 9px;
+  }
+
+  .knowledge-trace-group,
+  .knowledge-trace-item {
+    padding-left: 36px;
+  }
+
+  .knowledge-trace-item__marker {
+    height: 16px;
+    left: 1px;
+    width: 16px;
+  }
+}
+
+// Empty state - shown on any page of a knowledge base that has not been filled
+// in yet. Quiet rather than alarming: nothing is wrong, there is just nothing
+// here yet.
+.knowledge-admin-theme .knowledge-empty-state {
+  max-width: 70ch;
+  padding: 24px;
+  margin-bottom: 24px;
+  background: #ffffff;
+  border-left: 4px solid #aeb7bd;
+}
+
+.knowledge-admin-theme .knowledge-empty-state h2 {
+  margin-top: 0;
+}
+
+.knowledge-admin-theme .knowledge-empty-state p:last-child {
+  margin-bottom: 0;
+}
+
+// Rendered package documentation. Prose, so it gets a readable measure and the
+// same restrained styling as the rest of the admin theme.
+.knowledge-admin-theme .knowledge-doc {
+  max-width: 76ch;
+  padding: 24px 32px;
+  background: #ffffff;
+}
+
+.knowledge-admin-theme .knowledge-doc h1 {
+  margin-top: 0;
+}
+
+.knowledge-admin-theme .knowledge-doc h2,
+.knowledge-admin-theme .knowledge-doc h3 {
+  margin-top: 32px;
+}
+
+.knowledge-admin-theme .knowledge-doc pre {
+  padding: 16px;
+  overflow-x: auto;
+  background: #f6f5f2;
+  border-left: 4px solid #aeb7bd;
+}
+
+.knowledge-admin-theme .knowledge-doc code {
+  font-size: 15px;
+}
+
+.knowledge-admin-theme .knowledge-doc table {
+  width: 100%;
+  margin-bottom: 24px;
+  border-collapse: collapse;
+}
+
+.knowledge-admin-theme .knowledge-doc th,
+.knowledge-admin-theme .knowledge-doc td {
+  padding: 8px 12px;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid #d8dde0;
+}