@import "tailwindcss";

@theme {
  --color-nord0: #2e3440;
  --color-nord1: #3b4252;
  --color-nord2: #434c5e;
  --color-nord3: #4c566a;
  --color-nord4: #d8dee9;
  --color-nord5: #e5e9f0;
  --color-nord6: #eceff4;
  --color-nord7: #8fbcbb;
  --color-nord8: #88c0d0;
  --color-nord9: #81a1c1;
  --color-nord10: #5e81ac;
  --color-nord11: #bf616a;
  --color-nord12: #d08770;
  --color-nord13: #ebcb8b;
  --color-nord14: #a3be8c;
  --color-nord15: #b48ead;
  --color-ink: #262b35;

  --font-sans: "Lato", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Milonga", ui-serif, serif;
  --font-mono: "Courier Prime", ui-monospace, monospace;
}

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    @apply bg-nord0 text-nord4 font-sans antialiased;
    background-image: linear-gradient(to bottom, var(--color-nord0), var(--color-ink));
  }

  ::selection {
    @apply bg-nord10/40;
  }

  * {
    scrollbar-width: none;
  }

  *::-webkit-scrollbar {
    display: none;
  }

  :is(a, button, input, select, textarea, [tabindex]):not([tabindex="-1"]):focus-visible {
    @apply outline-none ring-2 ring-nord8/60 rounded-sm;
  }

  [contenteditable]:focus-visible,
  [tabindex="-1"]:focus-visible {
    @apply outline-none;
  }
}

@layer components {
  .binder-item {
    @apply block rounded-md px-3 py-2 text-sm text-nord4/90 truncate cursor-pointer
           border border-transparent transition-colors duration-100;
  }

  .binder-item:hover {
    @apply bg-nord1 text-nord6;
  }

  .binder-item[aria-current="page"] {
    @apply bg-nord1 text-nord6 border-nord3/60;
  }

  .binder-item.is-highlighted {
    @apply bg-nord2 text-nord6 border-nord8/50;
  }

  .binder-mark-direct {
    @apply rounded-sm bg-nord13 text-nord0;
  }

  .binder-mark-fuzzy {
    @apply rounded-sm bg-nord12 text-nord0;
  }

  .pane {
    @apply w-96 shrink-0 h-full flex flex-col overflow-y-auto
           bg-nord1/90 backdrop-blur-sm border-l border-nord3/50 shadow-2xl;
    animation: pane-in 220ms ease-out;
  }

  @keyframes pane-in {
    from {
      transform: translateX(2.5rem);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .pane:focus-within,
  .pane:focus {
    @apply border-l-nord8/40;
  }

  .kind-badge {
    @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5
           text-[11px] uppercase tracking-widest bg-nord0/60 border border-nord3/60;
  }

  .key-hint {
    @apply inline-block rounded border border-nord3/70 bg-nord0/70 px-1.5 py-px
           font-mono text-[10px] text-nord4/70;
  }

  .inspector-section {
    @apply block rounded-md px-3 py-2 cursor-pointer border border-transparent transition-colors duration-100;
  }

  .inspector-section:hover {
    @apply bg-nord1;
  }

  .inspector-section.contains-highlight {
    @apply bg-nord2/70 border-nord7/40;
  }

  .inspector-pill {
    @apply inline-block rounded-full px-2 py-px text-[11px] bg-nord0/60 border border-nord3/50 cursor-pointer;
  }

  .inspector-pill.is-highlighted {
    @apply border-nord7 ring-1 ring-nord7/60;
  }

  .inspector-pill-character { @apply text-nord9; }
  .inspector-pill-location  { @apply text-nord12; }
  .inspector-pill-thread    { @apply text-nord14; }
  .inspector-pill-item      { @apply text-nord13; }
  .inspector-pill-faction   { @apply text-nord15; }
  .inspector-pill-other     { @apply text-nord4; }

  .inspector-kind-character { @apply text-nord9; }
  .inspector-kind-location  { @apply text-nord12; }
  .inspector-kind-thread    { @apply text-nord14; }
  .inspector-kind-item      { @apply text-nord13; }
  .inspector-kind-faction   { @apply text-nord15; }
  .inspector-kind-other     { @apply text-nord4; }

  .inspector-cast {
    @apply flex items-center gap-2 rounded-md px-3 py-1.5 text-left cursor-pointer
           border border-transparent transition-colors duration-100;
  }

  .inspector-cast > span:first-child {
    @apply flex-1;
  }

  .inspector-cast:hover {
    @apply bg-nord1;
  }

  .inspector-cast.is-highlighted {
    @apply bg-nord2/70 border-nord7/40;
  }

  .inspector-action {
    @apply px-1 text-nord4/40 hover:text-nord6 text-sm;
  }

  .pane-wide {
    @apply w-[32rem];
  }

  .flow-tab {
    @apply rounded-md px-2 py-1 text-[11px] uppercase tracking-widest text-nord4/60
           border border-transparent cursor-pointer transition-colors duration-100;
  }

  .flow-tab:hover {
    @apply text-nord6 bg-nord1;
  }

  .flow-tab.is-active {
    @apply text-nord6 bg-nord2 border-nord3/60;
  }

  .flow-legend-row {
    @apply flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left cursor-pointer
           border border-transparent opacity-60 transition-all duration-100;
  }

  .flow-legend-row:hover {
    @apply bg-nord1 opacity-90;
  }

  .flow-legend-row.is-active {
    @apply opacity-100;
  }

  .flow-chip {
    @apply inline-block h-3 w-3 shrink-0 rounded-full border border-nord3/70 bg-transparent;
  }

  .flow-table {
    @apply w-full text-xs text-nord4;
  }

  .flow-table th {
    @apply px-2 py-1 text-left font-bold text-nord4/70 border-b border-nord3/40 truncate max-w-32;
  }

  .flow-table td {
    @apply px-2 py-1 tabular-nums text-nord4/90 border-b border-nord3/20;
  }

  .history-preview {
    @apply text-sm text-nord4/80 whitespace-pre-wrap font-sans leading-relaxed;
  }

  .palette-input:focus-visible {
    @apply outline-none ring-0 rounded-none;
  }

  .palette-item {
    @apply flex items-center gap-3 px-4 py-2.5 text-sm text-nord4 cursor-pointer rounded-md;
  }

  .palette-item.is-highlighted {
    @apply bg-nord2 text-nord6;
  }
}

/* ---------- CodeMirror: the writing surface ---------- */

.cm-editor {
  height: 100%;
  font-size: 1.125rem;
  line-height: 1.85;
  background: transparent;
}

.cm-editor.cm-focused {
  outline: none;
}

.cm-editor .cm-scroller {
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.cm-editor .cm-content {
  padding: 4rem 0 45vh;
  caret-color: var(--color-nord6);
  max-width: 46rem;
  margin: 0 auto;
}

.cm-editor .cm-line {
  padding-left: 5ch;
  padding-right: 1ch;
}

.cm-editor .cm-cursor {
  border-left-color: var(--color-nord6);
  border-left-width: 2px;
}

.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground {
  background: color-mix(in srgb, var(--color-nord10) 40%, transparent);
}

.cm-editor .cm-activeLine {
  background: color-mix(in srgb, var(--color-nord1) 45%, transparent);
}

.cm-editor .cm-placeholder {
  color: color-mix(in srgb, var(--color-nord4) 40%, transparent);
  font-style: italic;
}

.cm-editor .cm-foldPlaceholder {
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0 0.6em;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-nord1) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-nord3) 60%, transparent);
  color: color-mix(in srgb, var(--color-nord4) 60%, transparent);
  font-size: 0.75em;
  font-style: normal;
  cursor: pointer;
  text-indent: 0;
}

.cm-editor .cm-foldPlaceholder:hover {
  border-color: var(--color-nord8);
  color: var(--color-nord6);
}

.cm-line.cm-quoteline {
  border-left: 2px solid color-mix(in srgb, var(--color-nord7) 55%, transparent);
  background: color-mix(in srgb, var(--color-nord1) 25%, transparent);
}

.cm-line.cm-hang-1 { text-indent: -2ch; }
.cm-line.cm-hang-2 { text-indent: -3ch; }
.cm-line.cm-hang-3 { text-indent: -4ch; }
.cm-line.cm-hang-4 { text-indent: -5ch; }
.cm-line.cm-hang-5 { text-indent: -5ch; }
.cm-line.cm-hang-6 { text-indent: -5ch; }

.cm-heading-mark {
  font-family: var(--font-mono);
  color: color-mix(in srgb, var(--color-nord9) 55%, transparent);
}

.cm-mention {
  border-radius: 9999px;
  padding: 0.05em 0.45em;
  background: color-mix(in srgb, var(--color-nord2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-nord3) 60%, transparent);
  cursor: pointer;
}

.cm-mention:hover {
  border-color: var(--color-nord8);
}

.cm-editor .cm-mention,
.cm-editor .cm-mention span {
  text-decoration: none;
  font-style: normal;
  color: inherit;
}

.cm-mention.cm-mention-highlighted {
  box-shadow: 0 0 0 2px var(--color-nord7);
}

.cm-embed {
  display: inline-block;
  width: 100%;
  margin: 0.25rem 0;
  padding: 0.7rem 1rem 0.8rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-nord1) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-nord3) 40%, transparent);
  cursor: pointer;
  text-indent: 0;
}

.cm-embed:hover {
  border-color: color-mix(in srgb, var(--color-nord8) 50%, transparent);
}

.cm-embed-header {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.cm-embed-sigil {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.cm-embed-character .cm-embed-sigil { color: var(--color-nord9); }
.cm-embed-location  .cm-embed-sigil { color: var(--color-nord12); }
.cm-embed-thread    .cm-embed-sigil { color: var(--color-nord14); }
.cm-embed-item      .cm-embed-sigil { color: var(--color-nord13); }
.cm-embed-faction   .cm-embed-sigil { color: var(--color-nord15); }
.cm-embed-other     .cm-embed-sigil { color: var(--color-nord4); }

.cm-embed-name {
  font-weight: 700;
  color: var(--color-nord6);
}

.cm-embed-kind {
  font-style: italic;
  font-size: 0.8em;
  color: color-mix(in srgb, var(--color-nord4) 45%, transparent);
}

.cm-embed-hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75em;
  color: color-mix(in srgb, var(--color-nord4) 45%, transparent);
  opacity: 0;
  transition: opacity 150ms ease;
}

.cm-embed:hover .cm-embed-hint {
  opacity: 1;
}

.cm-embed-excerpt {
  margin-top: 0.3rem;
  font-size: 0.85em;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-nord4) 75%, transparent);
}

.cm-mention.cm-mention-character { color: var(--color-nord9); }
.cm-mention.cm-mention-location  { color: var(--color-nord12); }
.cm-mention.cm-mention-thread    { color: var(--color-nord14); }
.cm-mention.cm-mention-item      { color: var(--color-nord13); }
.cm-mention.cm-mention-faction   { color: var(--color-nord15); }
.cm-mention.cm-mention-other     { color: var(--color-nord4); }

.pane .cm-editor {
  font-size: 0.9rem;
  line-height: 1.7;
}

.pane .cm-editor .cm-content {
  padding: 1.25rem 0 4rem;
  max-width: none;
}

.pane .cm-editor .cm-line {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.pane .cm-line.cm-hang-1,
.pane .cm-line.cm-hang-2,
.pane .cm-line.cm-hang-3,
.pane .cm-line.cm-hang-4,
.pane .cm-line.cm-hang-5,
.pane .cm-line.cm-hang-6 {
  text-indent: 0;
}

.pane .cm-editor .cm-activeLine {
  background: transparent;
}

/* ---------- Flow chart SVG ---------- */

.flow-chart {
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
}

.flow-series {
  transition: opacity 0.3s ease;
}

.flow-series.is-dim {
  opacity: 0.15;
}

.flow-grid {
  stroke: color-mix(in srgb, var(--color-nord3) 45%, transparent);
  stroke-width: 1;
}

.flow-axis-label {
  fill: color-mix(in srgb, var(--color-nord4) 55%, transparent);
  font-size: 9px;
}

.flow-direct-label {
  fill: var(--color-nord4);
  font-size: 10px;
}

/* ---------- Autocomplete tooltip ---------- */

.cm-tooltip {
  background: color-mix(in srgb, var(--color-nord1) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-nord3) 60%, transparent);
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  max-height: 16rem;
}

.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li {
  padding: 0.45rem 0.9rem;
  color: var(--color-nord4);
}

.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--color-nord2);
  color: var(--color-nord6);
}

.cm-completionLabel {
  color: inherit;
}

.cm-completionDetail {
  float: right;
  margin-left: 1.5rem;
  font-style: normal;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-nord4) 55%, transparent);
}

.cm-completionIcon {
  display: none;
}