/* ─────────────────────────────────────────────────────────────
   Canvas (v2) — the "🎨 Canvas" tab of the Notes panel.
   Ported from the repo-root `Headaches v3.html` <style>. EVERY selector is
   scoped under `.nc2-root` so nothing leaks into the rest of the app. Colours
   pull from the notes-doc palette tokens (which cascade in, since .nc2-root
   sits inside .notes-doc-root); a `[data-mode="dark"]` block flips the few
   surfaces that need it. The only unscoped rules are the print helpers, which
   are inert unless <body> carries `.nc2-printing`.
   ───────────────────────────────────────────────────────────── */

.nc2-root {
  --nc-bg:        var(--paper-2);
  --nc-panel:     var(--card);
  --nc-border:    var(--line);
  --nc-ink:       var(--ink);
  --nc-accent:    var(--accent);
  --nc-accent-soft: #e3e9f4;
  --nc-box-border: var(--ink-2);
  --nc-danger:    var(--red);
  --nc-sheet:     var(--card);

  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nc-bg);
  color: var(--nc-ink);
  font-family: var(--nd-sans);
}
.nc2-root[data-mode="dark"] {
  --nc-bg:        var(--paper-2);
  --nc-panel:     var(--card);
  --nc-border:    var(--line);
  --nc-accent-soft: rgba(147, 178, 238, .2);
  --nc-box-border: var(--ink-2);
  --nc-sheet:     var(--card);
}
.nc2-root * { box-sizing: border-box; }

/* ---------- Left tool rail ---------- */
.nc2-root #toolrail {
  flex: none;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: var(--nc-panel);
  border-right: 1px solid var(--nc-border);
  z-index: 15;
}
.nc2-root #toolrail button.tool {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--nc-ink);
  cursor: pointer;
}
.nc2-root #toolrail button.tool:hover { background: var(--nc-bg); }
.nc2-root #toolrail button.tool.active { background: var(--nc-accent); border-color: var(--nc-accent); color: var(--on-accent); }
.nc2-root #toolrail .railsep { width: 22px; height: 1px; background: var(--nc-border); margin: 2px 0; }

/* ---------- Contextual text-format popover ---------- */
.nc2-root .nc2-fmtbar {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  user-select: none;
}
.nc2-root .nc2-fmtbar[hidden] { display: none; }
.nc2-root .nc2-fmtbar button.fmt {
  font: inherit;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--on-accent);
  font-size: 13px;
  cursor: pointer;
}
.nc2-root .nc2-fmtbar button.fmt:hover { background: rgba(255,255,255,.16); }
.nc2-root .nc2-fmtbar .fmt-swatches { display: inline-flex; gap: 5px; align-items: center; margin-left: 4px; }
.nc2-root .nc2-fmtbar .swatch {
  width: 15px; height: 15px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  cursor: pointer;
}
.nc2-root .nc2-fmtbar .swatch:hover { transform: scale(1.15); }

/* ---------- Floating status hint ---------- */
.nc2-root .nc2-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 25;
  max-width: 80%;
  background: var(--nc-ink);
  color: var(--nc-panel);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc2-root .nc2-hint[hidden] { display: none; }

/* ---------- Body layout ---------- */
.nc2-root #main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;          /* anchor for the Pages overlay */
}

/* ---------- Sidebar (Pages) ----------
   Overlays the canvas instead of taking layout width, so the board keeps the
   full pane. Collapsed by default; the toolbar ‹ / ☰ Pages button slides it. */
.nc2-root #sidebar {
  position: absolute;
  left: 44px; top: 0; bottom: 0;    /* sits just past the tool rail when open */
  z-index: 20;
  width: 210px;
  flex: none;
  visibility: visible;
  background: var(--nc-panel);
  border-right: 1px solid var(--nc-border);
  box-shadow: 2px 0 14px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform .15s ease, visibility .15s;
}
.nc2-root #sidebar.collapsed {
  /* -100% clears its own width; the extra -44px clears the rail offset so nothing
     peeks through. visibility:hidden is the belt-and-braces. */
  transform: translateX(calc(-100% - 48px));
  visibility: hidden;
  box-shadow: none;
  pointer-events: none;
}
.nc2-root #sidebar h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft, var(--ink-3));
  margin: 14px 14px 6px;
}
.nc2-root .page-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: 1px 6px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
}
.nc2-root .page-item:hover { background: var(--nc-bg); }
.nc2-root .page-item.active { background: var(--nc-accent-soft); color: var(--nc-accent); font-weight: 600; }
.nc2-root .page-item .name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc2-root .page-item .name[contenteditable="true"] { outline: 1px solid var(--nc-accent); border-radius: 3px; padding: 0 2px; white-space: normal; }
.nc2-root .page-item .del {
  flex: 0 0 auto; visibility: hidden; border: none; background: none;
  color: var(--ink-soft, var(--ink-soft)); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.nc2-root .page-item:hover .del { visibility: visible; }
.nc2-root .page-item .del:hover { color: var(--nc-danger); background: rgba(179,38,30,.08); }
.nc2-root #newPageBtn {
  margin: 8px 12px 14px;
  font: inherit; font-size: 13px; padding: 8px;
  border: 1px dashed var(--nc-border); background: var(--nc-panel);
  border-radius: 7px; cursor: pointer; color: var(--nc-accent);
}
.nc2-root #newPageBtn:hover { background: var(--nc-accent-soft); }

/* ---------- Canvas area: vertical stack of A4 sheets ---------- */
.nc2-root #canvasWrap {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;          /* scroll-space anchor for .nc2-fmtbar / .nc2-hint */
}
.nc2-root #pagesStack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 24px;
  min-width: min-content;
}
.nc2-root .page-block { display: flex; flex-direction: column; }
.nc2-root .sheet-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft, var(--ink-3));
  margin: 0 0 6px 2px;
}
.nc2-root .page-sheet {
  position: relative;
  width: 794px;          /* A4 portrait @ ~96dpi */
  min-height: 1123px;
  background: var(--nc-sheet);
  box-shadow: 0 2px 14px rgba(0,0,0,.12);
  flex: 0 0 auto;
}
.nc2-root .arrow-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.nc2-root .arrow-layer .arrow-hit {
  pointer-events: stroke;
  stroke: transparent;
  stroke-width: 14px;
  cursor: pointer;
  fill: none;
}
.nc2-root .arrow-layer .arrow-line { stroke: var(--nc-box-border); stroke-width: 2px; fill: none; }
.nc2-root .arrow-layer .arrow-line.faint { opacity: .26; }
.nc2-root .arrow-layer .arrow.selected .arrow-line { stroke: var(--nc-accent); stroke-width: 2.5px; }
.nc2-root .arrow-layer .arrow-endpoint {
  pointer-events: all;
  fill: var(--on-accent);
  stroke: var(--nc-accent);
  stroke-width: 2.5px;
  cursor: grab;
}
.nc2-root .arrow-layer .arrow-endpoint:active { cursor: grabbing; }
.nc2-root .arrow-layer .arrow-endpoint.free { stroke-dasharray: 3 2.5; }
.nc2-root .arrow-layer .arw-word-preview { fill: var(--nc-accent-soft); stroke: var(--nc-accent); stroke-width: 1.5px; }
.nc2-root .arrow-layer .arw-dot-preview { fill: var(--nc-accent); stroke: var(--on-accent); stroke-width: 2px; }

/* ---------- Boxes ---------- */
.nc2-root .box {
  position: absolute;
  border: 2px solid var(--nc-box-border);
  border-radius: 10px;
  background: var(--nc-sheet);
  min-width: 60px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.nc2-root .box.selected { box-shadow: 0 0 0 2px var(--nc-accent); border-color: var(--nc-accent); }
.nc2-root .box.flash { animation: nc2-flash 1.2s ease; }
@keyframes nc2-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42, 75, 141, 0); }
  25%      { box-shadow: 0 0 0 4px var(--nc-accent); }
}

.nc2-root .marquee {
  position: absolute; z-index: 6; pointer-events: none;
  border: 1px solid var(--nc-accent);
  background: rgba(42, 75, 141, .10);
}
.nc2-root .page-sheet.drop-target { outline: 3px solid var(--nc-accent); outline-offset: -3px; }
.nc2-root .box .handle {
  flex: 0 0 auto;
  height: 13px;
  cursor: grab;
  border-radius: 8px 8px 0 0;
  background: var(--nc-bg);
  border-bottom: 1px solid var(--nc-border);
}
.nc2-root .box .handle:hover { filter: brightness(.96); }
.nc2-root .box .handle:active { cursor: grabbing; }
.nc2-root .box .content {
  flex: 1 1 auto;
  padding: 6px 9px 8px;
  outline: none;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  cursor: text;
  color: var(--nc-ink);
}
.nc2-root .box .content:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-soft, var(--ink-soft));
}
/* Auto-lists inside a box */
.nc2-root .box .content ul,
.nc2-root .box .content ol      { margin: 2px 0; padding-left: 24px; }
.nc2-root .box .content li      { margin: 1px 0; }
.nc2-root .box .content ul      { list-style: none; }
.nc2-root .box .content ul > li { position: relative; }
.nc2-root .box .content ul > li::before {
  content: "\2013";
  position: absolute; left: -16px;
  color: currentColor;
}
.nc2-root .box .content ol        { list-style-type: decimal; }
.nc2-root .box .content ol ol     { list-style-type: lower-alpha; }
.nc2-root .box .content ol ol ol  { list-style-type: lower-roman; }
.nc2-root .box .content ol ol ol ol { list-style-type: lower-alpha; }
.nc2-root .box .resize {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  border-radius: 0 0 4px 0;
}

/* ---------- Images ---------- */
.nc2-root .img-item {
  position: absolute;
  z-index: 1;
  cursor: grab;
}
.nc2-root .img-item:active { cursor: grabbing; }
.nc2-root .img-item img {
  width: 100%; height: 100%;
  display: block;
  border-radius: 6px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.nc2-root .img-item.selected { outline: 2px solid var(--nc-accent); outline-offset: 1px; }
.nc2-root .img-item.link-source { box-shadow: 0 0 0 3px var(--nc-accent); }
.nc2-root .img-item .resize {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  border-radius: 0 0 4px 0;
  background: rgba(255,255,255,.65);
}
.nc2-root.arrow-mode .img-item { cursor: crosshair; }

/* Arrow-mode cue: boxes are click-to-link targets */
.nc2-root.arrow-mode .box,
.nc2-root.arrow-mode .box .content,
.nc2-root.arrow-mode .box .handle { cursor: crosshair; }
.nc2-root .box.link-source { box-shadow: 0 0 0 3px var(--nc-accent); }

/* ---------- Print (all pages, one A4 sheet each) ----------
   On print the engine moves `.nc2-print-area` up to <body> and adds
   `.nc2-printing`; the live app under #root is hidden. */
.nc2-print-area { display: none; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }

  body.nc2-printing > #root { display: none !important; }
  body.nc2-printing { background: #fff !important; overflow: visible !important; }
  body.nc2-printing .nc2-print-area { display: block !important; }

  .nc2-print-area .print-sheet {
    position: relative;
    width: 794px;
    height: 1123px;
    overflow: hidden;
    background: #fff;
    page-break-after: always;
    break-after: page;
  }
  .nc2-print-area .print-sheet:last-child { page-break-after: auto; break-after: auto; }

  .nc2-print-area .print-arrows {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
    z-index: 3;
  }
  .nc2-print-area .print-sheet .arrow-line { stroke: #000 !important; stroke-width: 2px; fill: none; }
  .nc2-print-area .print-sheet .arrow-line.faint { opacity: .32; }

  .nc2-print-area .print-sheet .box {
    position: absolute;
    display: flex; flex-direction: column;
    border: 2px solid #000;
    border-radius: 10px;
    background: #fff;
  }
  .nc2-print-area .print-sheet .box .content {
    padding: 6px 9px 8px;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .nc2-print-area .print-sheet .box .content:empty::before { content: ""; }
  .nc2-print-area .print-sheet .box .content ul,
  .nc2-print-area .print-sheet .box .content ol { margin: 2px 0; padding-left: 24px; }
  .nc2-print-area .print-sheet .box .content ul { list-style: none; }
  .nc2-print-area .print-sheet .box .content ul > li { position: relative; }
  .nc2-print-area .print-sheet .box .content ul > li::before {
    content: "\2013"; position: absolute; left: -16px;
  }
  .nc2-print-area .print-sheet .box .content ol { list-style-type: decimal; }

  .nc2-print-area .print-sheet .img-item { position: absolute; z-index: 1; }
  .nc2-print-area .print-sheet .img-item img { width: 100%; height: 100%; display: block; }
}