/* Tokens match recruiting.css so the two pages read as one product. */
/* Built on the shared theme (theme.css, loaded first), so the graph pages
   look like the rest of the product and sit naturally inside the chat's
   dialog. The names below are the ones this sheet grew up with, pointed at
   the theme; the five node-kind fills stay the graph's own. */
:root {
  --sky: var(--bg);
  --sky-raised: var(--panel);
  --sky-high: var(--hover);
  --text: var(--ink);
  --gold: #1f6d5f;
  --aqua: #4f8f82;
  --ochre: #b7862b;
  --slate: #5b6b7c;
  --indigo: #4a6fa5;
  --danger: var(--error-text);
  --on-accent: #ffffff;
  --edge: #a9a6c2;
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--sky); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button, .quiet { font: inherit; cursor: pointer; }
.primary {
  border: 0; border-radius: var(--radius-control); padding: 8px 14px;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.primary:hover { filter: brightness(1.06); }
.primary:disabled { opacity: .5; cursor: progress; }
.quiet {
  border: 1px solid var(--line); border-radius: var(--radius-control); padding: 5px 10px;
  background: transparent; color: var(--text); text-decoration: none; font-size: .88rem;
}
.quiet:hover { border-color: var(--muted); }
.quiet.on { border-color: var(--accent); color: var(--accent); }

/* The company overviews, one tab each. */
.view-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.view-divider { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.view-tab {
  border: 1px solid var(--line); border-radius: var(--radius-control);
  padding: 6px 12px; background: var(--sky-raised); color: var(--muted);
  font: inherit; font-size: .88rem; cursor: pointer;
}
.view-tab:hover:not(:disabled) { border-color: var(--muted); }
.view-tab:disabled { opacity: .45; cursor: default; }
.view-tab.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Category filters: what is shown, and what an expansion asks for. */
.categories { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.categories legend { float: left; margin-right: 6px; color: var(--muted); font-size: .82rem; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 6px;
  font-size: .82rem; color: var(--text); background: var(--sky-raised);
}
.chip input { accent-color: var(--accent); margin: 0; }
.chip:has(input:not(:checked)) { color: var(--faint); background: transparent; }

/* Header */
.top {
  flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  width: min(1320px, calc(100% - 32px)); margin: 0 auto; padding: 14px 0 6px;
}
h1 {
  margin: 0; font-family: var(--f-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 500; line-height: 1.1;
}
h2 { margin: 0 0 8px; font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; }
.status-line { margin: 4px 0 0; color: var(--muted); }
.top-actions { flex: none; display: flex; gap: 8px; align-items: center; }

.banner { width: min(1320px, calc(100% - 32px)); margin: 8px auto; padding: 10px 14px; border-radius: var(--radius-control); }
.banner.error { background: #f6e3e0; color: var(--danger); }
/* Work happening elsewhere: stated, not alarming. */
.banner.working { background: #f5ecd9; color: #6b4e14; }

/* Controls */
.controls {
  width: min(1320px, calc(100% - 32px)); margin: 10px auto 0; box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px; background: var(--sky-raised);
  border: 1px solid var(--line); border-radius: var(--radius-surface);
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { color: var(--muted); font-size: .82rem; }
.field select, .field input[type="text"] {
  border: 1px solid var(--line); border-radius: var(--radius-control);
  padding: 8px 10px; background: var(--sky-raised); color: var(--text); font: inherit;
}
.field input[type="text"] { min-width: 260px; }
.field select:focus, .field input:focus { outline: none; border-color: var(--gold); }
.field.checkbox { flex-direction: row; align-items: center; gap: 8px; }
/* 44px of hit area for a small control, without drawing a 44px box. */
.field.checkbox input { width: 18px; height: 18px; accent-color: var(--gold); margin: 13px 0; }
.field.checkbox label { color: var(--text); font-size: .9rem; }

/* Board */
.board {
  flex: 1 1 auto; min-height: 0;
  width: min(1320px, calc(100% - 32px)); margin: 14px auto 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start;
}
.picture, .table-view {
  background: var(--sky-raised); border: 1px solid var(--line);
  border-radius: var(--radius-surface); padding: 12px;
}
#canvas { display: block; width: 100%; height: min(68vh, 680px); cursor: grab; touch-action: none; }
#canvas.dragging { cursor: grabbing; }
.picture-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.picture-bar h2 { margin: 0; }
.picture-actions { display: flex; gap: 6px; }
.hint-line { margin: 6px 2px 0; color: var(--muted); font-size: .82rem; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 2px 0; padding: 0; color: var(--muted); font-size: .82rem; }
.legend li { display: flex; align-items: center; gap: 6px; }
/* Set apart from the five kinds above it: this one describes a state, not a
   kind, and should not read as a sixth entry in the taxonomy. */
.legend li.legend-note { margin-left: auto; font-style: italic; color: var(--faint); }
.key { width: 14px; height: 14px; flex: none; }

/* Nodes are told apart by shape as well as colour: five kinds, five shapes,
   five fills, no two alike. 'Part of an incident' is deliberately not a sixth
   kind — it is a state any item or event can be in, so it reads as a red
   outline on whatever shape the node already has. */
.n-person { fill: var(--aqua); }
.n-organization { fill: var(--slate); }
.n-item { fill: var(--gold); }
.n-event { fill: var(--ochre); }
.n-document { fill: var(--indigo); }
.shape.incident { stroke: var(--danger); stroke-width: 2.5; }
/* Two kinds the query API makes up rather than stores: the question at the
   centre, and a "+N more" standing for a category not drawn yet. */
.n-query { fill: var(--text); }
.n-cluster { fill: var(--sky-raised); stroke: var(--muted) !important; stroke-width: 1.5; stroke-dasharray: 3 2; }
.node.kind-cluster .caption { fill: var(--aqua); font-style: italic; }
.n-day { fill: var(--faint); }
.node:hover .n-day { fill: var(--aqua); }
/* The emergent graph has its own taxonomy, so its own pair of shapes. */
.n-entity { fill: var(--aqua); }
.n-kind { fill: var(--ochre); }

/* Says where the drawing came from, which matters most for the emergent graph:
   it is a snapshot of the last extraction, not something computed just now. */
.provenance {
  width: min(1320px, calc(100% - 32px)); margin: 10px auto 0;
  color: var(--muted); font-size: .82rem;
}

.edge { stroke: var(--edge); stroke-opacity: .6; stroke-width: 1.2; fill: none; }
.edge.involves, .edge.updates_domain { stroke-dasharray: 3 3; }
.edge.more { stroke-dasharray: 1 3; stroke-opacity: .5; }
.edge.matches { stroke: var(--text); stroke-opacity: .25; }
.lane-label { font-size: 10px; fill: var(--faint); }
.node { cursor: pointer; }
.node .shape { stroke: var(--sky-raised); stroke-width: 1.5; }
.node .caption { font-size: 9px; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.node .caption.side { text-anchor: start; }
.node .caption.strong { font-size: 11px; font-weight: 600; fill: var(--text); }
.node.expanded .shape { stroke: var(--muted); }
.node:hover .shape, .node.selected .shape { stroke: var(--text); stroke-width: 2; }
.node:focus-visible { outline: none; }
.node:focus-visible .ring { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.node .ring { stroke: none; fill: none; }

/* Table view: the accessible source of truth for the same relationships. */
.table-scroll { max-height: min(60vh, 560px); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { position: sticky; top: 0; background: var(--sky-high); font-weight: 600; }
tbody tr:hover { background: var(--sky-high); }
td.kind { color: var(--muted); white-space: nowrap; }

/* Details rail */
.details {
  background: var(--sky-raised); border: 1px solid var(--line);
  border-radius: var(--radius-surface); padding: 14px; min-height: 120px;
}
.details .empty { margin: 0; color: var(--faint); }
.details dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.details dt { color: var(--muted); font-size: .82rem; }
.details dd { margin: 0; font-size: .9rem; word-break: break-word; }
.details .name { margin: 0 0 2px; font-weight: 600; line-height: 1.35; }
.details .kind-line { margin: 0 0 10px; color: var(--muted); font-size: .82rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.details .neighbours { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.details .neighbours li { font-size: .86rem; }
.details .neighbours button {
  border: 0; background: none; padding: 0; color: var(--aqua); font: inherit;
  text-align: left; cursor: pointer; text-decoration: underline;
}

/* Attributes/Evidence sub-tabs inside a double-clicked node's details. */
.detail-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.detail-tab {
  border: 1px solid var(--line); border-radius: var(--radius-control);
  padding: 4px 10px; background: transparent; color: var(--muted);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.detail-tab.on { border-color: var(--aqua); color: var(--aqua); font-weight: 600; }
.evidence-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.evidence-list li { border-top: 1px solid var(--line); padding-top: 8px; }
.evidence-list li:first-child { border-top: none; padding-top: 0; }
.evidence-title { margin: 0; font-weight: 600; font-size: .88rem; }
.evidence-excerpt {
  margin: 4px 0 0; color: var(--muted); font-size: .82rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 900px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .field input[type="text"] { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* The answer page: the question as the title, with a small line above it. */
.eyebrow { margin: 0 0 2px; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
#question-title { font-size: clamp(1.1rem, 1.6vw, 1.45rem); }

/* Inside the chat's dialog: the dialog already names the question and the
   way back, so the page drops its own title and links out. */
body.embedded .standalone-only,
body.embedded .eyebrow,
body.embedded #question-title { display: none; }
body.embedded .top { padding-top: 8px; }
body.embedded .board { margin-bottom: 12px; }
body.embedded #canvas { height: min(62vh, 640px); }