/* Blue Horizon — bespoke design system.
   Aesthetic: warm-neutral enterprise + a single ember accent + a thin "horizon"
   gradient signature. Depth via hairlines and elevation, never glow. */

:root { color-scheme: light dark; }
* { -webkit-tap-highlight-color: transparent; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Creative ambient background — soft indigo→ember "horizon" glow in the corners.
   The bg-canvas / bg-night-bg utility sets the base colour; this layers light. */
body {
  background-image:
    radial-gradient(1100px 560px at 100% -8%, rgba(180, 83, 9, 0.10), transparent 60%),
    radial-gradient(900px 520px at -8% 108%, rgba(67, 56, 202, 0.09), transparent 55%);
  background-attachment: fixed;
}
.dark body {
  background-image:
    radial-gradient(1000px 560px at 100% -8%, rgba(245, 158, 11, 0.05), transparent 60%),
    radial-gradient(900px 520px at -8% 108%, rgba(99, 102, 241, 0.07), transparent 55%);
}

/* The signature horizon line: indigo → ember. Reused as a brand motif. */
.horizon-line {
  height: 2px;
  background: linear-gradient(90deg, #4338CA 0%, #6D28D9 35%, #B45309 70%, #F59E0B 100%);
}

/* Mono micro-label / kicker */
.kicker {
  font-family: '"IBM Plex Mono"', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 500;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #dcd9d3; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb { background: #34343a; background-clip: content-box; }

/* View transition */
.view-enter { animation: viewIn .3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.toast { animation: toastIn .25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Dropzone */
.dropzone { transition: border-color .18s ease, background-color .18s ease; }
.dropzone.is-drag { border-color: #B45309 !important; background-color: rgba(180,83,9,.04); }

/* Sidebar nav */
.nav-link { position: relative; transition: background-color .15s ease, color .15s ease; }
.nav-link.active { color: #B45309; }
.dark .nav-link.active { color: #F59E0B; }
.nav-link.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  height: 16px; width: 3px; border-radius: 999px;
  background: linear-gradient(180deg, #4338CA, #F59E0B);
}

.bar-fill { transition: width .6s cubic-bezier(0.16, 1, 0.3, 1); }

.spinner { width: 16px; height: 16px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Topology editor ── */
#topo-canvas { background-image: radial-gradient(circle, rgba(28,25,23,0.07) 1px, transparent 1px); background-size: 22px 22px; }
.dark #topo-canvas { background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); }
.topo-node { position: absolute; cursor: grab; user-select: none; transition: box-shadow .15s ease, border-color .15s ease; }
.topo-node:active { cursor: grabbing; }
.topo-node.selected { box-shadow: 0 0 0 2px #B45309; }
.dark .topo-node.selected { box-shadow: 0 0 0 2px #F59E0B; }
.topo-node.connect-source { box-shadow: 0 0 0 2px #4338CA; }
.topo-canvas-wrap.connect-mode .topo-node { cursor: crosshair; }

/* Print */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .no-print { display: none !important; }
  .print-area { display: block !important; }
  .print-doc, .print-doc * { color: #000 !important; }
  @page { margin: 16mm; }
}
.print-area { display: none; }

input[type="range"] { accent-color: #B45309; }
.dark input[type="range"] { accent-color: #F59E0B; }
input, select, textarea { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; font-family: '"IBM Plex Mono"', ui-monospace, monospace; }