/* Native feature fragments: color and contrast only. Layout stays in the source. */
.features {
  --widget-ink: #1a2b42;
  --widget-body: #41536a;
  --widget-muted: #627187;
  --widget-line: #d7e0eb;
  --widget-ground: #f0f4fa;
  --widget-surface: #ffffff;
  --widget-field: #f8fafd;
  --widget-blue: #05308c;
  --widget-selected: #e4edfc;
  --widget-selected-line: #b8ccec;
  --widget-wire: #b4c5dc;
  --widget-shadow: 0 3px 10px #1933570b, 0 1px 2px #19335706;
}

body[data-direction="henry"] .features {
  --widget-ink: #24303a;
  --widget-body: #48545d;
  --widget-muted: #6c716f;
  --widget-line: #dddcd4;
  --widget-ground: #f1eee7;
  --widget-surface: #fffefa;
  --widget-field: #f8f6f0;
  --widget-selected: #e8eef9;
  --widget-selected-line: #bccbe3;
  --widget-wire: #bdbfb8;
  --widget-brass: #8a6b36;
  --widget-shadow: 0 4px 12px #3f39240b, 0 1px 2px #3f392405;
}

body[data-direction="hebbia"] .features {
  --widget-ink: #162b42;
  --widget-body: #3f5369;
  --widget-muted: #5d7187;
  --widget-line: #cdd8e4;
  --widget-ground: #edf2f7;
  --widget-surface: #ffffff;
  --widget-field: #f4f7fa;
  --widget-selected: #dfeafb;
  --widget-selected-line: #a9c0e0;
  --widget-wire: #a9bdd5;
  --widget-shadow: 0 1px 3px #1b3b5d08;
}

.features .artwork { background-color: var(--widget-ground); }
.features .surface {
  background-color: var(--widget-surface);
  border-color: var(--widget-line);
  box-shadow: var(--widget-shadow);
}
.features .number { color: var(--widget-blue); }
.features .caption h3 { color: var(--widget-ink); }
.features .caption p { color: var(--widget-body); }

/* Primary text and source facts share a legible, quiet hierarchy. */
.features :is(.fragmentLabel, .selectedProperty strong, .editorTitle,
  .receivedMessage strong, .documentTitle h4, .platformNode strong),
.features .relationshipCard header strong,
.features .nextAction strong,
.features .coleBrief header > strong { color: var(--widget-ink); }

.features :is(.operator, .inputLabel, .menuLabel, .recordHead, .attachment,
  .permissionLine, .coleBrief header),
.features .selectedProperty > div > span,
.features .relationshipCard > div > span,
.features .draftFragment header > small,
.features .draftFragment footer > span:first-child,
.features .inputValues span,
.features .documentSheet header > span,
.features .documentTitle > span,
.features .documentTitle p,
.features .documentSheet li > span,
.features .nextAction small,
.features .platformNode > div > span { color: var(--widget-muted); }

.features :is(.field, .inputField, .recordRow, .documentTag),
.features .relationshipCard p,
.features .receivedMessage p,
.features .draftFragment > p,
.features .inputValues strong,
.features .inputField > strong,
.features .scenarioMenu > div:not(:first-child),
.features .documentSheet li,
.features .coleBrief > p,
.features .coleOutputs > div,
.features .providers > span { color: var(--widget-body); }

.features :is(.field, .inputField) {
  background-color: var(--widget-field);
  border-color: var(--widget-line);
}
.features .field > svg,
.features .inputField > svg:last-child,
.features .documentSheet li > svg,
.features .recordRow > span:first-child > svg { color: var(--widget-muted); }

/* NA blue identifies selections, approval states and connected sources. */
.features .selectedField,
.features .scenarioMenu > div[data-selected],
.features .recordRow[data-selected] .stageChip,
.features .reviewPill {
  color: var(--widget-blue);
  background-color: var(--widget-selected);
  border-color: var(--widget-selected-line);
}
.features :is(.propertyIcon, .checkMark, .relationshipBlue, .taskAvatar, .platformMark) {
  color: var(--widget-blue);
  background-color: var(--widget-selected);
  border-color: var(--widget-selected-line);
}
.features :is(.relationshipIcon, .mailAvatar) {
  color: var(--widget-body);
  background-color: var(--widget-ground);
  border-color: var(--widget-line);
}
.features .focusedField {
  border-color: var(--widget-selected-line);
  background-color: var(--widget-surface);
  box-shadow: 0 0 0 2px var(--widget-selected);
}
.features .selectedProperty,
.features .documentTag,
.features .nextAction { border-color: var(--widget-selected-line); }
.features .taskCheck {
  color: var(--widget-blue);
  background-color: var(--widget-selected);
  border-color: var(--widget-selected-line);
}
.features .draftFragment header > span,
.features .scenarioMenu > div > svg,
.features .documentTag > svg,
.features .coleOutputs > div > svg,
.features .providers > span > svg,
.features .permissionLine > svg { color: var(--widget-blue); }
.features .scenarioIcon { border-color: var(--widget-wire); }
.features .scenarioMenu > div[data-selected] .scenarioIcon,
.features .recordRow[data-selected] .stageChip > i {
  background-color: var(--widget-blue);
  border-color: var(--widget-blue);
}
.features .stageChip {
  color: var(--widget-body);
  background-color: var(--widget-field);
  border-color: var(--widget-line);
}
.features .stageChip > i { background-color: var(--widget-muted); }
.features .recordRow[data-selected] { background-color: var(--widget-field); }

/* Crisp rules keep the source diagrams visible without decorative effects. */
.features .relationshipCard > div,
.features .draftFragment footer,
.features .menuLabel,
.features .documentSheet ol,
.features .documentSheet li,
.features .recordHead,
.features .recordRow,
.features .coleOutputs > div + div { border-color: var(--widget-line); }
.features .documentBehind {
  background-color: var(--widget-field);
  border-color: var(--widget-line);
}
.features .verticalWire,
.features .graphBranch::before,
.features .providerWires > i:nth-child(2)::before,
.features .providerWires > i:nth-child(2)::after { background-color: var(--widget-wire); }
.features .graphBranch i,
.features .providerWires > i { border-color: var(--widget-wire); }
.features .verticalWire::before,
.features .verticalWire::after,
.features .graphBranch i::after {
  border-color: var(--widget-wire);
  background-color: var(--widget-surface);
}
.features .coleWire { color: var(--widget-wire); }
.features .permissionLine > span { color: var(--widget-wire); }
.features .claudeMark { color: var(--widget-body); }

/* Henry's warm secondary accent is limited to two small source details. */
body[data-direction="henry"] .features .feature .number,
body[data-direction="henry"] .features .attachment > svg {
  color: var(--widget-brass);
}