relay-knowledge 1.0.1

:root,
:root[data-theme="dark"] {
  --bg: #11110f;
  --sidebar: #0c0c0b;
  --surface: #171614;
  --surface-raised: #1e1d1a;
  --input-bg: #11100e;
  --pre-bg: #0d0c0b;
  --pre-text: #efe5d6;
  --button-hover-bg: #25231f;
  --button-hover-border: #625c52;
  --button-primary-border: #c39552;
  --button-primary-hover: #e2b66e;
  --button-primary-text: #15120d;
  --tab-active-bg: #29251f;
  --tab-active-border: #7d735f;
  --line: #34312c;
  --line-strong: #4d4941;
  --text: #f5f0e8;
  --muted: #aaa196;
  --soft: #d8d0c3;
  --green: #7ecf96;
  --amber: #d8a85f;
  --red: #dd7668;
  --cyan: #7cb7d8;
  --focus: #d8a85f;
}

:root[data-theme="light"] {
  --bg: #f7f7f4;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f0efeb;
  --input-bg: #ffffff;
  --pre-bg: #f2f1ed;
  --pre-text: #24231f;
  --button-hover-bg: #e9e7e1;
  --button-hover-border: #aaa39a;
  --button-primary-border: #b98233;
  --button-primary-hover: #c98f3d;
  --button-primary-text: #17130d;
  --tab-active-bg: #e8e2d8;
  --tab-active-border: #9d8d72;
  --line: #ded9d0;
  --line-strong: #bcb5aa;
  --text: #23221f;
  --muted: #6e675e;
  --soft: #47433d;
  --green: #247a3b;
  --amber: #b98233;
  --red: #b8483e;
  --cyan: #2f728f;
  --focus: #9b6a25;
}

:root {
  color: var(--text);
  background: var(--bg);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  overflow: hidden;
}

#root {
  height: 100vh;
  height: 100dvh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input,
select,
textarea,
a {
  outline-color: var(--focus);
}

.shell {
  display: grid;
  height: 100%;
  grid-template-columns: 240px minmax(0, 1fr);
  overflow: hidden;
}

.sidebar {
  min-height: 0;
  padding: 22px 16px;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
}

.brand {
  margin-bottom: 22px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.nav-list {
  display: grid;
  gap: 4px;
}

.nav-list a {
  display: block;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a:focus,
.nav-list a.active {
  background: var(--surface-raised);
  color: var(--text);
}

.content {
  display: grid;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 26px 28px 56px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.toolbar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.title {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 760;
  line-height: 1.2;
}

.subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.button,
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-raised);
  cursor: pointer;
}

.button:hover,
.tab:hover {
  border-color: var(--button-hover-border);
  background: var(--button-hover-bg);
}

.button.primary {
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
  background: var(--amber);
  font-weight: 700;
}

.button.primary:hover {
  background: var(--button-primary-hover);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.refresh-icon {
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
}

.health-icon {
  width: 12px;
  height: 18px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}

.warn-icon::before {
  position: absolute;
  inset: 2px 7px;
  border-radius: 2px;
  background: var(--amber);
  content: "";
}

.warn-icon::after {
  position: absolute;
  right: 6px;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  content: "";
}

.plus-icon::before,
.plus-icon::after,
.run-icon::before,
.copy-icon::before,
.copy-icon::after,
.clear-icon::before,
.clear-icon::after {
  position: absolute;
  background: currentColor;
  content: "";
}

.plus-icon::before {
  top: 7px;
  left: 2px;
  width: 12px;
  height: 2px;
}

.plus-icon::after {
  top: 2px;
  left: 7px;
  width: 2px;
  height: 12px;
}

.run-icon::before {
  top: 3px;
  left: 4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  background: transparent;
}

.copy-icon::before {
  top: 2px;
  left: 5px;
  width: 8px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
}

.copy-icon::after {
  top: 5px;
  left: 2px;
  width: 8px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: var(--surface-raised);
}

.clear-icon::before,
.clear-icon::after {
  top: 7px;
  left: 2px;
  width: 12px;
  height: 2px;
}

.clear-icon::before {
  transform: rotate(45deg);
}

.clear-icon::after {
  transform: rotate(-45deg);
}

.sun-icon {
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: scale(0.64);
}

.sun-icon::before,
.moon-icon::before {
  position: absolute;
  content: "";
}

.sun-icon::before {
  inset: -6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid transparent;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid transparent;
  border-radius: 50%;
}

.moon-icon::before {
  inset: 1px 3px 1px 0;
  border-radius: 50%;
  box-shadow: 5px 0 0 currentColor;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--soft);
  background: var(--surface);
  font-size: 13px;
  line-height: 1;
}

.status-pill.good {
  border-color: rgba(126, 207, 150, 0.35);
  color: var(--green);
}

.status-pill.warn {
  border-color: rgba(216, 168, 95, 0.42);
  color: var(--amber);
}

.status-pill.bad {
  border-color: rgba(221, 118, 104, 0.45);
  color: var(--red);
}

.section {
  min-height: 0;
  padding: 24px 0 0;
  overflow-x: auto;
}

.section-title {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 16px;
  font-weight: 730;
  line-height: 1.3;
}

.home-query-entry {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.home-query-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  max-width: 760px;
}

.home-query-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.home-query-result {
  display: grid;
  gap: 8px;
  max-width: 760px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.home-query-result[data-state="running"] .muted-line {
  color: var(--amber);
}

.home-query-result[data-state="success"] .result-heading {
  color: var(--green);
}

.status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--soft);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-auto-rows: minmax(92px, auto);
  gap: 10px;
}

.metric-item,
.graph-overview,
.readiness-item,
.provider-item,
.runtime-list div,
.operation-form,
.operation-preview,
.staged-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.metric-item {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 12px;
}

.graph-overview {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-bottom: 10px;
  padding: 12px;
}

.graph-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.graph-overview .panel-title {
  margin-bottom: 0;
}

.graph-overview-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.graph-overview-canvas {
  display: block;
  width: 100%;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
}

.graph-edge {
  stroke: var(--line-strong);
  stroke-linecap: round;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.graph-edge.good {
  stroke: rgba(126, 207, 150, 0.48);
}

.graph-edge.warn {
  stroke: rgba(216, 168, 95, 0.62);
}

.graph-edge.bad {
  stroke: rgba(221, 118, 104, 0.62);
}

.graph-node-dot {
  fill: var(--line-strong);
  stroke: var(--surface);
  stroke-width: 3;
}

.graph-node.good .graph-node-dot {
  fill: var(--green);
}

.graph-node.warn .graph-node-dot {
  fill: var(--amber);
}

.graph-node.bad .graph-node-dot {
  fill: var(--red);
}

.graph-node-label,
.graph-node-value {
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: var(--input-bg);
  stroke-linejoin: round;
  stroke-width: 3px;
}

.graph-node-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.graph-node-value {
  fill: var(--muted);
  font-size: 11px;
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  grid-auto-rows: minmax(88px, auto);
  gap: 10px;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.provider-item {
  min-width: 0;
  padding: 12px;
}

.provider-cursors {
  margin-top: 4px;
}

.readiness-item {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 12px;
}

.readiness-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.readiness-label {
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.readiness-detail {
  margin-top: 8px;
  color: var(--cyan);
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (min-width: 921px) {
  .content[data-page="readiness"] .readiness-item:last-child {
    grid-column: 1 / -1;
  }
}

dt {
  color: var(--muted);
  font-size: 13px;
}

dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 20px;
}

.operation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tab {
  min-width: 88px;
}

.tab.active {
  border-color: var(--tab-active-border);
  color: var(--text);
  background: var(--tab-active-bg);
}

.operation-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.35fr);
  gap: 12px;
}

.operation-form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.field-grid {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text);
  background: var(--input-bg);
}

input,
select {
  padding: 0 10px;
}

textarea {
  resize: vertical;
  padding: 9px 10px;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
}

.checkbox-group {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkbox-group legend {
  padding: 0;
  color: var(--muted);
  font-size: 13px;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
}

.checkbox-row input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--amber);
}

.operation-preview,
.staged-panel {
  min-width: 0;
  padding: 14px;
}

.operation-result {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.result-heading {
  color: var(--text);
  font-weight: 680;
}

.operation-result[data-state="running"] .muted-line {
  color: var(--amber);
}

.operation-result[data-state="success"] .result-heading {
  color: var(--green);
}

.panel-title {
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 720;
}

.pre-group {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.pre-label {
  color: var(--muted);
  font-size: 13px;
}

pre,
code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;
}

pre {
  min-height: 46px;
  max-height: 260px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--pre-text);
  background: var(--pre-bg);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.staged-panel {
  grid-column: 1 / -1;
}

.staged-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.staged-item {
  color: var(--muted);
}

.staged-item code {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.staged-name {
  color: var(--text);
  font-weight: 680;
}

time {
  color: var(--muted);
  font-size: 12px;
}

.muted-line {
  color: var(--muted);
}

.error-message {
  color: var(--red);
}

.warning-message {
  color: var(--amber);
  font-size: 13px;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--soft);
  background: var(--surface-raised);
  font-weight: 720;
}

td {
  color: var(--text);
}

tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 920px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }

  .brand {
    margin-bottom: 12px;
  }

  .nav-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }

  .content {
    padding: 22px 18px 48px;
  }

  .toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-actions {
    justify-content: flex-start;
  }

  .home-query-form {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .readiness-grid,
  .provider-grid,
  .runtime-list,
  .operation-layout {
    grid-template-columns: 1fr;
  }

  .graph-overview-canvas {
    height: 240px;
  }

  .graph-node-label {
    font-size: 11px;
  }

  .graph-node-value {
    font-size: 10px;
  }

  .staged-panel {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .content {
    padding-inline: 14px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .graph-overview-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .graph-overview-canvas {
    height: 220px;
  }

  .tab {
    min-width: 0;
    flex: 1 1 30%;
  }
}