/* Insight board (Phase 1). Core Design semantic tokens only; the sticky-note paper tints are the one
   board-specific palette, defined here with dark variants following tokens.css. */
:root {
  --note-evidence: #fff1a8;
  --note-insight: #d9e9f6;
  --note-decision: #dcefd6;
  --note-question: #f8dbe2;
  --note-ink: #161616;
  --note-ink-secondary: #4a4a4a;
}
:root[data-theme='dark'],
:root.dark {
  --note-evidence: #4b4320;
  --note-insight: #1e3347;
  --note-decision: #22391f;
  --note-question: #46232c;
  --note-ink: #f1f1f1;
  --note-ink-secondary: #c4c4c4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not(.light) {
    --note-evidence: #4b4320;
    --note-insight: #1e3347;
    --note-decision: #22391f;
    --note-question: #46232c;
    --note-ink: #f1f1f1;
    --note-ink-secondary: #c4c4c4;
  }
}

.view-toggle { display: flex; gap: 0; margin: 0 0 var(--space-3); }
.view-toggle .cp-btn + .cp-btn { margin-left: -1px; }
.view-toggle .cp-btn[aria-pressed='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.board-root { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.board-stage { position: relative; height: min(78vh, 900px); min-height: 460px; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); touch-action: none; cursor: grab; }
.board-stage.is-full { position: fixed; inset: 0; z-index: 1000; height: auto; min-height: 0; border: 0;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.board-stage:fullscreen { width: 100%; height: 100%; }
html.board-full-open, html.board-full-open body { overflow: hidden; }
.board-stage.is-panning { cursor: grabbing; }
.board-stage.is-selecting { cursor: crosshair; }
.board-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--hairline) 1.2px, transparent 1.3px); }
.board-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.board-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.board-edges path { fill: none; stroke: var(--fg-secondary); stroke-width: 1.4; stroke-dasharray: 5 5; }
.board-edges path.is-approved { stroke: var(--data-3-on-canvas); stroke-dasharray: none; }
.board-edges path.is-changed { stroke: var(--signal); }
.board-edges path.is-hot { stroke: var(--fg); stroke-width: 2.6; stroke-dasharray: none; }

.board-frame { position: absolute; background: var(--bg); border: 1.5px solid var(--field-border); opacity: 0.94; }
.board-frame.is-target { border: 2px dashed var(--interactive); background: var(--surface); }
.board-slot-ghost { position: absolute; border: 2px dashed var(--interactive); background: color-mix(in srgb, var(--interactive) 8%, transparent); pointer-events: none; }
.board-frame.is-moving { box-shadow: var(--shadow-lg); }
.board-frame.is-dim { opacity: 0.45; }
.board-frame-bar { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 4px; cursor: move; min-width: 0; }
.board-grip { color: var(--fg-secondary); font: 600 var(--text-sm) / 1 var(--font-mono); padding: 4px; user-select: none; }
.board-name { border: 1px solid transparent; background: transparent; color: var(--fg); font: 600 14px var(--font-body); padding: 3px 4px; min-width: 60px; max-width: 260px; cursor: text; }
.board-name:hover { border-color: var(--hairline); }
.board-name:focus { border-color: var(--field-border); background: var(--bg); }
.board-chips { display: flex; gap: 4px; overflow: hidden; flex: 1; min-width: 0; }
.board-chip { font: 500 var(--text-2xs) / 1 var(--font-mono); letter-spacing: var(--tracking-tight); text-transform: uppercase; padding: 4px 5px; border: 1px solid var(--hairline); color: var(--fg-secondary); white-space: nowrap; background: var(--bg); }
.board-chip.is-signal { color: var(--signal); border-color: var(--signal); }
.board-chip.is-ok { color: var(--data-3-on-canvas); border-color: var(--data-3-on-canvas); }
.board-icon-btn { min-width: var(--target-min); min-height: var(--target-min); border: 1px solid transparent; background: transparent; color: var(--fg); cursor: pointer; font: inherit; }
.board-icon-btn:hover { border-color: var(--hairline); }
.board-menu { position: absolute; transform: translateX(-100%); background: var(--bg); border: 1px solid var(--field-border); z-index: var(--z-dropdown); min-width: 220px; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); cursor: default; }
.board-menu button { text-align: left; border: 0; background: none; color: var(--fg); padding: 8px 10px; cursor: pointer; font: inherit; font-size: var(--text-sm); }
.board-menu button:hover { background: var(--surface); }

.board-note { position: absolute; width: 150px; height: 116px; background: var(--note-evidence); color: var(--note-ink); padding: 9px 9px 7px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-md); font-size: 12px; line-height: 1.35; cursor: grab; user-select: none; touch-action: none; overflow: hidden; }
.board-note[data-kind='insight'], .board-note[data-kind='answer'], .board-note[data-kind='action'] { background: var(--note-insight); }
.board-note[data-kind='decision'] { background: var(--note-decision); }
.board-note[data-kind='question'], .board-note[data-kind='issue'] { background: var(--note-question); }
.board-note:focus-visible { outline: var(--focus-ring) solid var(--interactive); outline-offset: var(--focus-offset); }
.board-note.is-selected { outline: 2px solid var(--interactive); outline-offset: 2px; }
.board-note.is-dragging { box-shadow: var(--shadow-lg); cursor: grabbing; z-index: 20; transform: rotate(-1.5deg); }
.board-note.is-target { outline: 2px dashed var(--interactive); outline-offset: 3px; }
.board-note.is-inspected { outline: 3px solid var(--interactive); outline-offset: 3px; z-index: 5; }
.board-note.is-cited::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--note-ink); border-radius: 50%; }
.board-note strong { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 10px; }
.board-note .board-note-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board-note .board-note-tags { font: 500 9.5px / 1.2 var(--font-mono); color: var(--note-ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-note .board-note-meta { margin-top: auto; display: flex; justify-content: space-between; gap: 4px; font: 500 9.5px / 1.2 var(--font-mono); letter-spacing: 0.03em; color: var(--note-ink-secondary); text-transform: uppercase; }
.board-note .board-note-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-note.is-dim, .board-key.is-dim { opacity: 0.22; }

.board-key { position: absolute; width: 250px; background: var(--bg); color: var(--fg); border: 1.5px solid var(--fg); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-md); cursor: grab; user-select: none; touch-action: none; }
.board-key.is-approved { border-color: var(--data-3-on-canvas); }
.board-key.is-changed { border-color: var(--signal); }
.board-key.is-dragging { box-shadow: var(--shadow-lg); cursor: grabbing; z-index: 20; }
.board-key:focus-visible { outline: var(--focus-ring) solid var(--interactive); outline-offset: var(--focus-offset); }
.board-key b { font-size: 13.5px; line-height: 1.3; font-weight: 600; }
.board-key-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-key button { cursor: pointer; }

.board-pile { position: absolute; left: 22px; top: 44px; right: 30px; height: 96px; cursor: pointer; }
.board-pcard { position: absolute; inset: 0; background: var(--note-evidence); color: var(--note-ink); box-shadow: var(--shadow-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.35; }
.board-pcard[data-kind='insight'], .board-pcard[data-kind='answer'], .board-pcard[data-kind='action'] { background: var(--note-insight); }
.board-pcard[data-kind='decision'] { background: var(--note-decision); }
.board-pcard[data-kind='question'], .board-pcard[data-kind='issue'] { background: var(--note-question); }
.board-pcard.p3 { transform: translate(8px, 8px); }
.board-pcard.p2 { transform: translate(4px, 4px); }
.board-pcard .board-note-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.board-hud { position: absolute; z-index: var(--z-sticky); display: flex; gap: 6px; align-items: center; background: var(--bg); border: 1px solid var(--hairline); padding: 6px; box-shadow: var(--shadow); }
.board-hud.is-tools { left: 12px; top: 12px; flex-wrap: wrap; max-width: calc(100% - 24px); }
.board-hud.is-zoom { left: 12px; bottom: 12px; }
.board-hud.is-zoom span { font: 500 var(--text-xs) var(--font-mono); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.board-hud.is-selection { left: 50%; transform: translateX(-50%); bottom: 12px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); }
.board-hud.is-filters { left: 12px; top: 58px; flex-direction: column; align-items: stretch; width: min(430px, calc(100% - 24px)); gap: 10px; padding: 12px; max-height: calc(100% - 70px); overflow: auto; }
.board-hud.is-legend { right: 12px; bottom: 12px; flex-wrap: wrap; gap: 4px 12px; max-width: 520px; }
.board-hud.is-legend i { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 5px; border: 1px solid var(--hairline); }
.board-label { font: 500 var(--text-xs) / 1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-secondary); }
.board-sub { display: block; color: var(--fg-secondary); font-size: var(--text-sm); }
.board-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.board-facets { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.board-facet { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.board-actor { display: flex; align-items: center; gap: 6px; }
.board-actor input { width: 150px; }
.board-tooltag { position: absolute; z-index: var(--z-dropdown); pointer-events: none; background: var(--fg); color: var(--bg); font: 500 var(--text-xs) var(--font-mono); padding: 4px 7px; white-space: nowrap; }
.board-marquee { position: absolute; z-index: 15; border: 1px solid var(--interactive); background: var(--surface); opacity: 0.6; pointer-events: none; }
.board-status { min-height: 1.4em; font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }
.board-status.is-error { color: var(--danger-ink); }
.board-loading { padding: var(--space-4); color: var(--fg-secondary); }

.board-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: var(--z-dropdown); border-left: 1px solid var(--hairline); display: flex; flex-direction: column; background: var(--bg); color: var(--fg); box-shadow: var(--shadow-lg); cursor: default; overflow: auto; }
.board-dhead { padding: 14px 16px 10px; border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 6px; }
.board-dhead h2 { margin: 0; font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.board-dhead .board-key-row { align-items: center; }
.board-dbody { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.board-dbody p { margin: 0; overflow-wrap: anywhere; }
.board-section { display: flex; flex-direction: column; gap: 6px; }
.board-trace { display: flex; flex-direction: column; }
.board-tnode { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 14px; }
.board-tnode::before { content: ''; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--field-border); }
.board-tnode:last-child::before { display: none; }
.board-tdot { width: 11px; height: 11px; border: 1.5px solid var(--fg); background: var(--bg); margin: 3px 0 0 3px; }
.board-tnode.is-here .board-tdot { background: var(--fg); }
.board-tbody { min-width: 0; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.board-tlink { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; font-size: var(--text-sm); color: var(--fg); }
.board-tlink:hover { color: var(--interactive); }
.board-quote { margin: 4px 0 0; padding: 6px 9px; border-left: 2px solid var(--fg); background: var(--surface); font-size: var(--text-sm); white-space: pre-wrap; }
.board-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 5px 10px; font-size: var(--text-sm); margin: 0; }
.board-kv dt { color: var(--fg-secondary); }
.board-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.board-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.board-tagchip { border: 1px solid var(--field-border); display: inline-flex; align-items: center; font: 500 var(--text-xs) var(--font-mono); }
.board-tagchip button { border: 0; background: none; color: var(--fg); cursor: pointer; padding: 3px 6px; min-height: var(--target-min); font: inherit; }
.board-tagchip button + button { border-left: 1px solid var(--hairline); color: var(--fg-secondary); }
.board-tagchip button:hover { background: var(--surface); }
.board-callout { border: 1px solid var(--hairline); background: var(--surface); padding: 10px 12px; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 8px; }
.board-callout.is-signal { border-color: var(--signal); background: transparent; }
.board-ver { border: 1px solid var(--hairline); padding: 8px 10px; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 760px) {
  .board-facets { grid-template-columns: 1fr; }
  .board-hud.is-legend { display: none; }
  .board-stage { height: 70vh; }
  .board-drawer { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .board-note.is-dragging { transform: none; }
  .board-stage *, .board-stage { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

.board-root [hidden] { display: none !important; }
.board-hud .cp-btn.is-on, .board-presets .cp-btn.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.board-hud .cp-input, .board-facet .cp-input { min-height: var(--control-height-sm); padding: 2px 6px; font-size: var(--text-sm); }

/* Live editing: other people's presence. Each person gets one of the Core Design data colours (--data-N-on-canvas) as --peer. */
.board-people { display: flex; gap: 4px; align-items: center; }
.board-person { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; border: 2px solid var(--peer, var(--data-1-on-canvas)); color: var(--fg); background: var(--bg); font: 600 var(--text-xs) / 1 var(--font-mono); border-radius: 50%; cursor: default; }
.board-live { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--text-xs) / 1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-secondary); white-space: nowrap; }
.board-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-secondary); }
.board-live.is-live { color: var(--data-3-on-canvas); }
.board-live.is-live::before { background: var(--data-3-on-canvas); }
.board-live.is-reconnecting, .board-live.is-offline { color: var(--signal); }
.board-live.is-reconnecting::before, .board-live.is-offline::before { background: var(--signal); }
.board-note.is-peer { outline: 2px solid var(--peer); outline-offset: 2px; }
.board-note.is-selected.is-peer { outline-color: var(--interactive); } /* your own selection wins visually */
.board-peer-tag { position: absolute; left: 0; top: 0; max-width: 100%; padding: 1px 5px; background: var(--peer); color: var(--bg); font: 600 9.5px / 1.3 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.board-frame.is-peer-editing { border-color: var(--peer); border-style: dashed; }
.board-peer-edit { position: absolute; left: -1px; top: -22px; padding: 2px 6px; background: var(--peer); color: var(--bg); font: 600 var(--text-2xs) / 1.3 var(--font-mono); white-space: nowrap; pointer-events: none; }

/* Distil panel: same drawer as the trace inspector, a little wider. Phone width falls back to the full-width drawer rule above. */
.board-distil { width: min(520px, 100%); }
.board-distil-btn { flex: none; }
.board-frame.is-distilling { border-color: var(--interactive); border-width: 2px; }
.board-dgroup { gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.board-dtitle { margin: 0; font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.board-dstage { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 0; border-top: 1px solid var(--hairline); }
.board-dcard { border: 1px solid var(--hairline); background: var(--surface); padding: 10px 12px; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 6px; }
.board-dcard.is-approved { border-color: var(--data-3-on-canvas); }
.board-dcard.is-old { opacity: 0.7; }
.board-dlist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.board-dsupport summary, .board-distil details > summary { cursor: pointer; font: 500 var(--text-xs) / 1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-secondary); min-height: var(--target-min); display: flex; align-items: center; }
.board-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.board-check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); overflow-wrap: anywhere; min-height: var(--target-min); align-items: center; }
.board-check input { flex: none; }
.board-dform { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--field-border); background: var(--bg); padding: 12px; }
.board-field { display: flex; flex-direction: column; gap: 3px; }
.board-field .cp-input, .board-dform .cp-input { width: 100%; font-size: var(--text-sm); }
.board-fieldset { border: 1px solid var(--hairline); margin: 0; padding: 8px 10px; min-width: 0; }
.board-fieldset legend { padding: 0 4px; }
.board-dside { display: flex; flex-direction: column; gap: 4px; }
.board-distil .board-quote { margin: 2px 0 0; }
.board-distil .board-tags .cp-btn { min-height: var(--target-min); }