@import url("/styles/theme.css");

/* -------------------------------------------------------------
   Light is the DEFAULT. We only switch to dark if the page
   explicitly sets html[data-theme="dark"] or .theme-dark.
   ------------------------------------------------------------- */
:root {
  --cv-bg:            var(--page-bg, var(--theme-bg, #f7efe3));  /* light parchment */
  --cv-surface:       var(--surface, var(--card-bg, #ffffff));
  --cv-surface-2:     var(--surface-2, #faf7f0);

  --cv-text:          var(--body-fg, var(--theme-fg, #3a3a3a));
  --cv-text-muted:    var(--muted-fg, #6a6a6a);
  --cv-heading:       var(--heading-fg, #2a2a2a);

  --cv-accent:        var(--link-color, var(--theme-accent, #b0413e));
  --cv-border:        var(--border-color, #e5ddcf);

  --cv-shadow:        0 8px 24px rgba(0,0,0,0.08);

  --cv-grid-gap:      40px;
  --cv-grid-line:     color-mix(in oklab, var(--cv-border), transparent 70%);
}

/* Optional DARK palette — only if your site sets a dark theme class/attr */
html[data-theme="dark"], .theme-dark {
  --cv-bg:         var(--theme-bg, #0f1020);
  --cv-surface:    var(--card-bg, #17192b);
  --cv-surface-2:  #1b1d36;
  --cv-text:       var(--theme-fg, #e7e9ff);
  --cv-text-muted: #bcc3ff;
  --cv-heading:    #cfd6ff;
  --cv-accent:     var(--theme-accent, #7aa2ff);
  --cv-border:     var(--border-color, #2a2d4a);
  --cv-shadow:     0 8px 24px rgba(0,0,0,0.25);
  --cv-grid-line:  color-mix(in oklab, var(--cv-border), transparent 50%);
}

/* ---------------- Base ---------------- */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-body, inherit), system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--cv-bg);
  color: var(--cv-text);
}

a { color: var(--link-color, var(--cv-accent)); }
a:hover { text-decoration: underline; }

/* ---------------- Toolbar ---------------- */
.toolbar {
  position: fixed; inset: 12px auto auto 12px;
  display: flex; gap: 8px; align-items: center;
  background: color-mix(in oklab, var(--cv-bg), #000 3%);
  backdrop-filter: blur(6px);
  border: 1px solid var(--cv-border);
  border-radius: 12px;
  padding: 8px 10px; z-index: 10;
}
.toolbar .spacer { width: 16px; display: inline-block; }
.toolbar button {
  background: var(--cv-surface);
  color: var(--cv-text);
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
}
.toolbar button:hover { border-color: var(--cv-accent); }
.toolbar button.saving { opacity: .75; cursor: wait; }

/* ---------------- Canvas world ---------------- */
#canvas-container {
  position: absolute; inset: 0;
  overflow: hidden; cursor: grab;

  /* FORCE light background & soft grid unless page sets dark theme */
  background-color: var(--cv-bg) !important;
  background-image:
    linear-gradient(90deg, var(--cv-grid-line) 1px, transparent 1px),
    linear-gradient(0deg,  var(--cv-grid-line) 1px, transparent 1px) !important;
  background-size: var(--cv-grid-gap) var(--cv-grid-gap) !important;
  background-position: 0 0, 0 0 !important;
}
#canvas-container.panning { cursor: grabbing; }

#world {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
}

/* ---------------- Cards ---------------- */
.card {
  position: absolute;
  min-width: 180px; max-width: 340px;
  padding: 10px 12px;
  border: 1px solid var(--cv-border);
  background: var(--cv-surface);
  border-radius: 12px;
  box-shadow: var(--cv-shadow);
  user-select: none;
}

.card h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: var(--cv-heading);
  line-height: 1.3;
}
.card p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--cv-text-muted); }

.card .drag-handle {
  position: absolute; inset: -6px -6px auto auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cv-accent); opacity: 0.9;
  cursor: grab; box-shadow: 0 4px 10px color-mix(in oklab, var(--cv-accent), transparent 60%);
}
.card.dragging .drag-handle { cursor: grabbing; }

/* Images inside cards */
.card img[data-role="card-img"] {
  display: block;
  max-width: 100%; height: auto;
  border-radius: 10px;
}

/* ---------------- Markdown ---------------- */
.card .md-body { font-size: .95rem; line-height: 1.45; color: var(--cv-text); }
.card .md-body h1,.card .md-body h2,.card .md-body h3{ margin:.25rem 0 .35rem; color: var(--cv-heading); }
.card .md-body h4,.card .md-body h5,.card .md-body h6{ margin:.2rem 0 .25rem; color: var(--cv-heading); font-weight:600; }
.card .md-body p { margin:.35rem 0; color: var(--cv-text-muted); }
.card .md-body ul,.card .md-body ol { padding-left:1.25rem; margin:.25rem 0; }
.card .md-body li { margin:.15rem 0; }
.card .md-body input[type="checkbox"]{ transform: translateY(1px); }
.card .md-body blockquote{
  margin:.25rem 0; padding:.25rem .5rem; border-left:3px solid var(--cv-accent);
  background: color-mix(in oklab, var(--cv-accent), transparent 92%); color: var(--cv-text); border-radius: 6px;
}
.card .md-body code{ padding:.1rem .25rem; border-radius:4px; background: color-mix(in oklab, var(--cv-text), transparent 92%); }
.card .md-body pre{ padding:.5rem .75rem; border-radius:.5rem; overflow:auto; background: color-mix(in oklab, var(--cv-text), transparent 92%); }
.card .md-body pre code{ background:transparent; padding:0; }
.card .md-body img{ display:block; max-width:100%; height:auto; border-radius:.4rem; }
.card .md-body mark{ background:#fff59d; padding:0 .15em; border-radius:.2em; }

/* ---------------- Debug badge ---------------- */
.canvas-debug .card .debug-badge {
  position:absolute; top:8px; right:8px;
  background:#c0392b; color:#fff; font:bold 11px/1.6 monospace;
  padding:2px 6px; border-radius:6px;

   /* ============ Canvas theme harmonized with site ============ */
:root {
  /* edge (arrow) color tuned for parchment bg */
  --edge-stroke: #7b6d63;          /* soft brown-grey */
  --edge-stroke-faint: #b6a89f;
  --edge-width: 2px;

  /* image sizing caps so huge source dims don’t explode the layout */
  --img-max-width: 420px;
  --img-max-height: 560px;
}

/* Background grid already matches site; keep it faint */
#world {
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}

/* --- Edges (arrows) --- */
.edges,
.edges svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* below cards */
}
.edges path {
  stroke: var(--edge-stroke);
  stroke-width: var(--edge-width);
  fill: none;
}
.edges path.is-faint {
  stroke: var(--edge-stroke-faint);
}
.edges marker path {
  fill: var(--edge-stroke);
}

/* --- Cards sit above edges --- */
.card {
  position: absolute;
  z-index: 1;
}

/* --- Image cards: clamp and keep aspect --- */
.card.image {
  /* let the image decide intrinsic width, but never exceed caps */
  max-width: var(--img-max-width);
}
.card.image img {
  display: block;
  max-width: var(--img-max-width);
  max-height: var(--img-max-height);
  width: auto;
  height: auto;
  object-fit: contain; /* don’t crop artwork */
  border-radius: 8px;
}

/* Link Inspector visuals */
.show-link-targets .card .md-body a.li-mark {
  outline: 2px dashed var(--accent, #c44);
  outline-offset: 2px;
  text-decoration: underline dotted;
}

.li-panel{
  position: fixed; right: 12px; top: 12px; bottom: 12px; width: min(520px, 46vw);
  background: var(--panel, #fff); color: var(--text, #222); border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.15); border-radius: 12px; z-index: 9999;
  display: flex; flex-direction: column; overflow: hidden;
}
.li-head{
  display:flex; justify-content:space-between; align-items:center; padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.03);
}
.li-actions { display:flex; gap:8px; align-items:center; }
.li-body{ overflow:auto; padding: 8px 10px; }
.li-row{ display:grid; grid-template-columns: 1fr 1.2fr auto 1.2fr; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,.05);}
.li-col a{ color: inherit; }
.li-badge{ padding:2px 6px; border-radius:999px; font:700 11px/1 monospace; }
.li-badge.ok{ background:#2ecc71; color:#fff; }
.li-badge.bad{ background:#e74c3c; color:#fff; }
.li-input{ width:100%; padding:6px 8px; border:1px solid rgba(0,0,0,.15); border-radius:8px; background:inherit; color:inherit; }


/* Optional: text cards get a consistent readable width */
.card.text {
  max-width: 460px;
}