.tn-excal-prototype {
  --tn-excal-ink: var(--tn-color-text-primary);
  --tn-excal-muted: var(--tn-color-text-secondary);
  --tn-excal-line: var(--tn-color-border);
  min-height: 100vh;
  padding: 16px;
  color: var(--tn-excal-ink);
  background: var(--tn-color-stage-bg);
  font-family: var(--tn-font-ui);
}

/* Bridge Excalidraw's light theme to Tent's product tokens without leaking
   into any other embedded editor. The stage stays neutral; the accent is
   reserved for the current object and keyboard focus. */
.tn-canvas-v5-host__scene .excalidraw,
.tn-excal-prototype__canvas .excalidraw {
  --button-gray-1: var(--tn-color-elevated-bg);
  --button-gray-2: var(--tn-color-hover);
  --button-gray-3: var(--tn-color-border-strong);
  --button-destructive-bg-color: var(--tn-color-danger-soft);
  --button-destructive-color: var(--tn-color-danger);
  --button-special-active-bg-color: var(--tn-color-success-soft);
  --focus-highlight-color: var(--tn-color-focus);
  --icon-fill-color: var(--tn-color-text-primary);
  --icon-green-fill-color: var(--tn-color-success);
  --default-bg-color: var(--tn-color-stage-bg);
  --input-bg-color: var(--tn-color-elevated-bg);
  --input-border-color: var(--tn-color-border);
  --input-hover-bg-color: var(--tn-color-hover);
  --input-label-color: var(--tn-color-text-secondary);
  --island-bg-color: var(--tn-color-elevated-bg);
  --keybinding-color: var(--tn-color-text-faint);
  --link-color: var(--tn-color-accent);
  --overlay-bg-color: var(--tn-color-overlay);
  --popup-bg-color: var(--tn-color-elevated-bg);
  --popup-secondary-bg-color: var(--tn-color-panel-bg);
  --popup-text-color: var(--tn-color-text-primary);
  --popup-text-inverted-color: var(--tn-color-text-on-accent);
  --select-highlight-color: var(--tn-color-focus);
  --shadow-island: var(--tn-shadow-card);
  --button-hover-bg: var(--tn-color-hover);
  --button-active-bg: var(--tn-color-selected);
  --button-active-border: var(--tn-color-accent);
  --default-border-color: var(--tn-color-border);
  --scrollbar-thumb: var(--tn-color-border-strong);
  --scrollbar-thumb-hover: var(--tn-color-text-faint);
  --sidebar-border-color: var(--tn-color-border);
  --sidebar-bg-color: var(--tn-color-elevated-bg);
  --text-primary-color: var(--tn-color-text-primary);
  --color-selection: var(--tn-color-accent);
  --color-icon-white: var(--tn-color-text-on-accent);
  --color-primary: var(--tn-color-accent);
  --color-primary-darker: color-mix(in srgb, var(--tn-color-accent) 84%, var(--tn-color-text-primary));
  --color-primary-darkest: color-mix(in srgb, var(--tn-color-accent) 68%, var(--tn-color-text-primary));
  --color-primary-light: var(--tn-color-accent-soft);
  --color-primary-light-darker: color-mix(in srgb, var(--tn-color-accent) 22%, var(--tn-color-elevated-bg));
  --color-primary-hover: color-mix(in srgb, var(--tn-color-accent) 88%, var(--tn-color-text-primary));
  --color-gray-10: var(--tn-color-panel-bg);
  --color-gray-20: var(--tn-color-elevated-bg);
  --color-gray-30: var(--tn-color-border);
  --color-gray-40: var(--tn-color-border-strong);
  --color-gray-50: var(--tn-color-text-faint);
  --color-gray-60: var(--tn-color-text-secondary);
  --color-gray-70: var(--tn-color-text-secondary);
  --color-gray-80: var(--tn-color-text-primary);
  --color-gray-85: var(--tn-color-text-primary);
  --color-gray-90: var(--tn-color-text-primary);
  --color-gray-100: var(--tn-color-text-primary);
  --color-disabled: var(--tn-color-ghost);
  --color-warning: var(--tn-color-warning-soft);
  --color-warning-dark: var(--tn-color-warning-border);
  --color-warning-darker: var(--tn-color-warning);
  --color-warning-darkest: var(--tn-color-warning);
  --color-text-warning: var(--tn-color-text-primary);
  --color-danger: var(--tn-color-danger);
  --color-danger-dark: var(--tn-color-danger-border);
  --color-danger-darker: var(--tn-color-danger);
  --color-danger-darkest: var(--tn-color-danger);
  --color-danger-text: var(--tn-color-text-primary);
  --color-danger-background: var(--tn-color-danger-soft);
  --color-danger-icon-background: var(--tn-color-danger-soft);
  --color-danger-color: var(--tn-color-danger);
  --color-danger-icon-color: var(--tn-color-danger);
  --color-warning-background: var(--tn-color-warning-soft);
  --color-warning-icon-background: var(--tn-color-warning-border);
  --color-warning-color: var(--tn-color-text-primary);
  --color-warning-icon-color: var(--tn-color-warning);
  --color-success: var(--tn-color-success-soft);
  --color-success-darker: var(--tn-color-success);
  --color-success-darkest: var(--tn-color-success);
  --color-success-text: var(--tn-color-success);
  --color-muted: var(--tn-color-text-secondary);
  --color-muted-darker: var(--tn-color-text-faint);
  --color-muted-darkest: var(--tn-color-text-primary);
  --color-muted-background: var(--tn-color-hover);
  --color-muted-background-darker: var(--tn-color-border);
  --color-surface-high: var(--tn-color-hover);
  --color-surface-mid: var(--tn-color-panel-bg);
  --color-surface-low: var(--tn-color-stage-bg);
  --color-surface-lowest: var(--tn-color-elevated-bg);
  --color-on-surface: var(--tn-color-text-primary);
  --color-brand-hover: var(--tn-color-accent);
  --color-brand-active: var(--tn-color-accent);
  --color-on-primary-container: var(--tn-color-accent);
  --color-surface-primary-container: var(--tn-color-accent-soft);
  --color-border-outline: var(--tn-color-border-strong);
  --color-border-outline-variant: var(--tn-color-border);
}

.tn-excal-prototype__header {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 0.8fr);
  gap: 24px;
  align-items: end;
  max-width: 1440px;
  margin: 0 auto 12px;
  padding: 0 2px;
}

.tn-excal-prototype__header h1,
.tn-excal-prototype__focus h2 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.tn-excal-prototype__header p,
.tn-excal-prototype__focus p {
  margin: 0;
  color: var(--tn-excal-muted);
  font-size: 13px;
  line-height: 1.6;
}

.tn-excal-prototype__eyebrow {
  color: var(--tn-color-accent);
  font-family: "Cascadia Code", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tn-excal-prototype__workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  min-height: 720px;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--tn-color-border);
  background: var(--tn-color-elevated-bg);
}

.tn-excal-prototype__canvas {
  position: relative;
  min-width: 0;
  min-height: 720px;
  border-right: 1px solid var(--tn-excal-line);
}

.tn-excal-prototype__canvas .excalidraw,
.tn-excal-prototype__canvas .excalidraw-container {
  width: 100%;
  height: 100%;
}

/* Keep Excalidraw's explicit activation boundary, but let the Tent card carry
   the instruction instead of covering its content with the default hint. */
.tn-excal-prototype__canvas .excalidraw__embeddable-hint {
  display: none;
}

.tn-excal-prototype__focus {
  padding: 20px 18px;
  background: var(--tn-color-panel-bg);
}

.tn-excal-prototype__focus dl {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}

.tn-excal-prototype__focus dl div {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tn-color-border);
}

.tn-excal-prototype__focus dt {
  margin-bottom: 4px;
  color: var(--tn-color-text-faint);
  font-size: 11px;
}

.tn-excal-prototype__focus dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
}

.tn-excal-prototype__focus-note {
  padding: 12px;
  border-left: 2px solid var(--tn-color-accent);
  background: var(--tn-color-accent-soft);
}

.tn-excal-prototype__empty {
  margin-top: 24px;
}

.tn-excal-node {
  position: relative;
  pointer-events: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tn-color-border) 84%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--tn-color-card-bg) 88%, transparent);
  color: var(--tn-color-text-primary);
  font-family: var(--tn-font-ui);
  transition:
    border-color var(--tn-motion-duration-standard) var(--tn-motion-ease-out),
    background-color var(--tn-motion-duration-standard) var(--tn-motion-ease-out),
    opacity var(--tn-motion-duration-standard) var(--tn-motion-ease-out);
}

.tn-excal-node[data-selected="true"] {
  border-color: var(--tn-color-text-primary);
  background: color-mix(in srgb, var(--tn-color-card-bg) 76%, var(--tn-color-selected));
}

.tn-excal-node[data-relation-focus="neighbor"] {
  border-color: color-mix(in srgb, var(--tn-color-text-faint) 52%, var(--tn-color-border));
}

.tn-excal-node[data-relation-focus="background"] {
  opacity: .7;
}

.tn-excal-node[data-projection-sync="pending-sync"] {
  border-style: dashed;
}

.tn-excal-node[data-projection-sync="unknown"] {
  border-style: dashed;
  border-color: var(--tn-color-border-strong);
}

.tn-excal-node[data-projection-sync="tombstone"] {
  border-style: dashed;
  border-color: var(--tn-color-text-faint);
  background: var(--tn-color-panel-bg);
  color: var(--tn-color-text-secondary);
}

.tn-excal-node::after {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--tn-color-text-secondary);
  border-radius: 2px;
  background: var(--tn-color-elevated-bg);
  content: "";
  opacity: 0;
  transform: rotate(45deg);
}

.tn-excal-node[data-needs-attention="true"]::after {
  opacity: 1;
}

.tn-excal-node h3 {
  display: -webkit-box;
  margin: 0;
  padding: 0 14px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 580;
  line-height: 1.35;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tn-excal-node[data-title-lines="1"] h3 {
  -webkit-line-clamp: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tn-excal-node *,
  .tn-excal-node *::before,
  .tn-excal-node *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}

@media (max-width: 900px) {
  .tn-excal-prototype__header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tn-excal-prototype__workbench {
    grid-template-columns: 1fr;
  }

  .tn-excal-prototype__canvas {
    min-height: 620px;
    border-right: 0;
    border-bottom: 1px solid var(--tn-excal-line);
  }
}
