/* ═══════════════════════════════════════════════
   notebook.css  —  notebook editor styles
   Canvas layout, full toolbar, code blocks,
   sticky notes
   ═══════════════════════════════════════════════ */

/* ── Sidebar ──────────────────────────────────── */
.nb-sidebar {
  width: 240px;
  border-right: 2px solid var(--rule-dark);
  background: var(--paper2);
  display: flex; flex-direction: column; flex-shrink: 0;
  overflow: hidden;
}

.nb-sh {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

.nb-st {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-faint);
}

.ic-btn {
  width: 22px; height: 22px;
  border: 1px solid var(--rule-dark); border-radius: var(--radius);
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mid); font-size: 16px; line-height: 1;
  transition: all .12s;
}
.ic-btn:hover { background: var(--paper3); border-color: var(--ink-mid); color: var(--ink); }

.nb-tl { flex: 1; overflow-y: auto; padding: 4px 0; }

/* Notebook tree item */
.nb-tree-item { user-select: none; }

.nb-tab {
  display: flex; align-items: center;
  padding: 6px 10px;
  cursor: pointer; font-size: 11px; color: var(--ink-mid); gap: 5px;
  transition: background .1s;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.nb-tab:hover { background: var(--paper3); color: var(--ink); }
.nb-tab.active { background: var(--paper3); color: var(--ink); border-left: 3px solid var(--ink); }
.nb-tab.sub { padding-left: 26px; font-size: 10px; background: transparent; }
.nb-tab.sub.active { background: var(--paper2); }

.nb-tab .nb-arrow {
  font-size: 8px; color: var(--ink-faint); width: 10px; flex-shrink: 0;
  transition: transform .15s; cursor: pointer;
}
.nb-tab .nb-arrow.open { transform: rotate(90deg); }

.nb-tab .tn {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nb-tab .tn-input {
  flex: 1; font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--blue, #1d4ed8); border-radius: 2px;
  background: var(--paper); color: var(--ink);
  padding: 1px 5px; outline: none;
  min-width: 0;
}

.nb-tab-actions {
  display: flex; gap: 2px; opacity: 0; transition: opacity .1s;
}
.nb-tab:hover .nb-tab-actions { opacity: 1; }

.nb-act-btn {
  font-size: 11px; padding: 1px 4px; background: none; border: none;
  cursor: pointer; color: var(--ink-faint); border-radius: 2px;
  transition: all .1s; line-height: 1;
}
.nb-act-btn:hover { background: var(--rule); color: var(--ink); }
.nb-act-btn.del:hover { color: var(--red); }

/* ── Editor area ──────────────────────────────── */
.nb-ed {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

.nb-eh {
  padding: 10px 18px 8px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper2); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
}

.nb-ti {
  font-family: var(--font-serif); font-size: 20px;
  border: none; outline: none;
  background: transparent; color: var(--ink); flex: 1;
}
.nb-ti::placeholder { color: var(--ink-faint); font-style: italic; }

.nb-export-btns { display: flex; gap: 6px; }

.exp-btn {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 9px;
  border: 1px solid var(--rule-dark); border-radius: var(--radius);
  background: transparent; color: var(--ink-mid);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.exp-btn:hover { background: var(--paper3); color: var(--ink); border-color: var(--ink-mid); }

/* ── FULL TOOLBAR ─────────────────────────────── */
.nb-toolbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper2); flex-shrink: 0;
  padding: 0 8px;
}

.tb-row {
  display: flex; align-items: center; gap: 1px;
  padding: 3px 0; flex-wrap: wrap;
}

.tb-row + .tb-row {
  border-top: 1px solid var(--rule);
}

.tb-font-sel, .tb-size-sel {
  font-family: var(--font-mono); font-size: 10px;
  border: 1px solid var(--rule-dark); border-radius: var(--radius);
  padding: 3px 5px; background: var(--paper); color: var(--ink);
  outline: none; cursor: pointer; height: 24px;
}
.tb-font-sel { width: 130px; }
.tb-size-sel { width: 52px; }

.tb-b {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 7px; height: 24px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; color: var(--ink-mid);
  transition: all .1s; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; min-width: 24px;
}
.tb-b:hover { background: var(--paper3); color: var(--ink); border-color: var(--rule-dark); }
.tb-b.active { background: var(--rule); color: var(--ink); border-color: var(--rule-dark); }

.tb-color-wrap { position: relative; display: flex; align-items: center; }
.tb-color-btn {
  width: 24px; height: 24px; border: 1px solid var(--rule-dark); border-radius: var(--radius);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: none; padding: 0; position: relative; overflow: hidden;
  transition: border-color .1s;
}
.tb-color-btn:hover { border-color: var(--ink-mid); }
.tb-color-btn input[type=color] {
  position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
  opacity: 0; cursor: pointer; border: none; padding: 0;
}

.tb-hl-wrap { position: relative; }
.tb-hl-btn {
  width: 28px; height: 24px; border: 1px solid var(--rule-dark); border-radius: var(--radius);
  cursor: pointer; font-size: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; transition: border-color .1s;
  position: relative; padding: 2px;
}
.tb-hl-btn:hover { border-color: var(--ink-mid); }

.hl-palette {
  position: absolute; top: 28px; left: 0; z-index: 200;
  background: var(--paper2); border: 1px solid var(--rule-dark);
  border-radius: var(--radius); padding: 6px; display: none;
  gap: 4px; flex-wrap: wrap; width: 140px;
  box-shadow: 2px 2px 8px rgba(0,0,0,.15);
}
.hl-palette.open { display: flex; }

.hl-swatch {
  width: 18px; height: 18px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.1); transition: transform .1s;
}
.hl-swatch:hover { transform: scale(1.2); }
.hl-swatch.none { border: 1px solid var(--rule-dark); background: none; font-size: 9px; display: flex; align-items: center; justify-content: center; color: var(--red); }

.tb-s {
  width: 1px; height: 18px; background: var(--rule-dark);
  margin: 0 3px; flex-shrink: 0;
}

.tb-spacing-wrap { position: relative; }
.spacing-menu {
  position: absolute; top: 28px; left: 0; z-index: 200;
  background: var(--paper2); border: 1px solid var(--rule-dark);
  border-radius: var(--radius); padding: 4px; display: none;
  flex-direction: column; min-width: 120px;
  box-shadow: 2px 2px 8px rgba(0,0,0,.15);
}
.spacing-menu.open { display: flex; }
.sp-opt {
  font-family: var(--font-mono); font-size: 10px; padding: 5px 8px;
  cursor: pointer; color: var(--ink-mid); border-radius: 2px;
  transition: background .1s;
}
.sp-opt:hover { background: var(--paper3); color: var(--ink); }

/* ── Canvas area ──────────────────────────────── */
.nb-canvas-wrap {
  flex: 1; overflow: auto; position: relative;
  background: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px,
      rgba(150,130,100,.055) 27px, rgba(150,130,100,.055) 28px);
}

/* The actual contenteditable editor */
.nb-ca {
  min-height: 100%;
  width: 100%;
  padding: 24px 32px 120px;
  font-family: var(--font-serif); font-size: 15px;
  /* REDUCED default line-height from 1.9 to 1.5 */
  line-height: 1.5;
  color: var(--ink); outline: none; border: none;
  background: transparent;
  position: relative;
}

.nb-ca:focus { outline: none; }

/* Rich text elements */
.nb-ca h1 { font-family: var(--font-display); font-size: 26px; letter-spacing: 1px; margin: 1em 0 .4em; }
.nb-ca h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; margin: 1em 0 .4em; }
.nb-ca h3 { font-family: var(--font-serif); font-size: 17px; font-style: italic; margin: .8em 0 .3em; }
.nb-ca blockquote { border-left: 3px solid var(--rule-dark); padding-left: 14px; color: var(--ink-mid); font-style: italic; margin: 8px 0; }
.nb-ca pre { margin: 8px 0; }
.nb-ca hr { border: none; border-top: 1px solid var(--rule-dark); margin: 16px 0; }
.nb-ca ul, .nb-ca ol { padding-left: 24px; }
.nb-ca table { border-collapse: collapse; margin: 8px 0; }
.nb-ca td, .nb-ca th { border: 1px solid var(--rule-dark); padding: 4px 8px; min-width: 60px; }
.nb-ca th { background: var(--paper2); font-weight: 700; }

/* Paragraph spacing (default) */
.nb-ca p { margin: 0 0 0.3em 0; }

/* ── Canvas floating images & blocks ──────────── */
.nb-img-wrap {
  display: inline-block;
  position: relative;
  margin: 4px 6px;
  cursor: default;
  line-height: 0;
  vertical-align: top;
  user-select: none;
}

.nb-img-wrap.canvas-pos {
  position: absolute;
  display: block;
}

.nb-img-wrap img {
  display: block;
  border-radius: 2px;
  max-width: 100%;
  border: 1px solid var(--rule);
}

.nb-img-wrap.selected {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.rh {
  position: absolute; width: 10px; height: 10px;
  background: #1d4ed8; border-radius: 50%;
  display: none; z-index: 30;
}
.nb-img-wrap.selected .rh { display: block; }
.rh.se { bottom: -5px; right: -5px; cursor: se-resize; }
.rh.sw { bottom: -5px; left: -5px;  cursor: sw-resize; }
.rh.ne { top: -5px;    right: -5px; cursor: ne-resize; }
.rh.nw { top: -5px;    left: -5px;  cursor: nw-resize; }

.img-toolbar {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 3px 6px;
  display: none; gap: 4px; white-space: nowrap; z-index: 40; align-items: center;
}
.nb-img-wrap.selected .img-toolbar { display: flex; }

.img-tb-btn {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 7px;
  border-radius: 2px; border: none;
  background: rgba(255,255,255,.15); color: inherit;
  cursor: pointer; transition: background .1s;
}
.img-tb-btn:hover { background: rgba(255,255,255,.3); }

/* ── Code block ──────────────────────────────── */
.code-block-wrap {
  display: block;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  margin: 8px 0;
  overflow: hidden;
  background: var(--paper2);
  position: relative;
  font-size: 0;
}

.code-block-wrap.canvas-pos {
  position: absolute;
}

.code-block-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--paper3);
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-mid);
  user-select: none;
}

.code-lang-badge {
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 10px;
  border: 1px solid var(--rule-dark); color: var(--ink-mid);
}

.code-block-sp { flex: 1; }

.code-run-btn {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  padding: 2px 9px; border-radius: var(--radius);
  border: 1px solid var(--green-fg, #4a8a4a);
  background: transparent; color: var(--green-fg, #4a8a4a);
  cursor: pointer; transition: all .12s;
}
.code-run-btn:hover { background: var(--green-fg, #4a8a4a); color: var(--paper); }
.code-run-btn.running { opacity: .6; cursor: not-allowed; }

.code-copy-btn, .code-move-btn {
  font-family: var(--font-mono); font-size: 9px;
  padding: 2px 7px; border-radius: var(--radius);
  border: 1px solid var(--rule-dark);
  background: transparent; color: var(--ink-faint);
  cursor: pointer; transition: all .12s;
}
.code-copy-btn:hover, .code-move-btn:hover { background: var(--paper); color: var(--ink); }

/* Delete button for code block */
.code-del-btn {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: var(--radius);
  border: none; background: transparent; color: var(--ink-faint);
  cursor: pointer; transition: all .12s; margin-left: 2px;
}
.code-del-btn:hover { color: var(--red, #c0392b); }

.code-textarea {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier Prime', monospace;
  font-size: 12px; line-height: 1.6;
  width: 100%;
  /* Default: show up to 10 lines comfortably */
  min-height: 48px;
  padding: 10px 14px;
  border: none; outline: none; resize: vertical;
  background: var(--paper2); color: var(--ink);
  tab-size: 2;
  display: block;
  box-sizing: border-box;
  transition: height 0.15s ease;
}

/* Expand / collapse button */
.cb-expand-btn {
  display: block;
  width: 100%;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  padding: 4px 0;
  border: none; border-top: 1px solid var(--rule-dark);
  background: var(--paper3); color: var(--ink-faint);
  cursor: pointer; text-align: center;
  transition: background .1s, color .1s;
}
.cb-expand-btn:hover { background: var(--rule); color: var(--ink); }

/* Output panel */
.code-output {
  border-top: 1px solid var(--rule-dark);
  background: var(--paper3);
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 14px; display: none;
  white-space: pre-wrap; word-break: break-word;
  color: var(--ink-mid);
  max-height: 180px; overflow-y: auto;
  line-height: 1.5;
}
.code-output.visible { display: block; }
.code-output.error { color: var(--red); }

.code-iframe {
  width: 100%; height: 200px; border: none;
  border-top: 1px solid var(--rule-dark);
  display: none; background: #fff;
}
.code-iframe.visible { display: block; }

.code-block-wrap .cb-resize {
  position: absolute; bottom: 0; right: 0;
  width: 14px; height: 14px;
  cursor: se-resize; z-index: 10;
  background: linear-gradient(135deg, transparent 50%, var(--rule-dark) 50%);
}

/* ── Sticky Notes ─────────────────────────────── */
.sticky-note {
  position: absolute;
  min-width: 160px;
  min-height: 100px;
  width: 200px;
  border-radius: 3px;
  box-shadow: 2px 3px 12px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  /* Slight rotation for natural look */
  transform: rotate(-0.5deg);
  transition: box-shadow .15s, transform .15s;
}
.sticky-note:hover {
  box-shadow: 3px 6px 20px rgba(0,0,0,.22);
  transform: rotate(0deg) translateY(-1px);
}

.sticky-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px 4px;
  background: rgba(0,0,0,.08);
  cursor: grab;
  flex-shrink: 0;
  min-height: 26px;
}

.sticky-colors {
  display: flex;
  gap: 4px;
  align-items: center;
}

.sticky-color-sw {
  width: 12px; height: 12px;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid rgba(0,0,0,.2);
  transition: transform .1s;
  display: inline-block;
}
.sticky-color-sw:hover { transform: scale(1.3); border-color: rgba(0,0,0,.4); }

.sticky-del-btn {
  font-size: 12px; line-height: 1;
  background: none; border: none;
  cursor: pointer; color: rgba(0,0,0,.4);
  padding: 1px 3px; border-radius: 2px;
  transition: color .1s, background .1s;
}
.sticky-del-btn:hover { color: rgba(180,30,30,.9); background: rgba(0,0,0,.08); }

.sticky-content {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(0,0,0,.75);
  outline: none;
  min-height: 70px;
  word-break: break-word;
  user-select: text;
  cursor: text;
}
.sticky-content:empty:before {
  content: attr(data-placeholder);
  color: rgba(0,0,0,.3);
  font-style: italic;
  pointer-events: none;
}

.sticky-resize {
  position: absolute;
  bottom: 0; right: 0;
  width: 16px; height: 16px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.2) 50%);
}

/* ── Empty state ─────────────────────────────── */
.nb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-faint); font-size: 12px; gap: 8px;
  background: var(--paper); font-style: italic;
}

/* ── Table insert dialog ─────────────────────── */
.tb-table-wrap { position: relative; }
.table-picker {
  position: absolute; top: 28px; left: 0; z-index: 200;
  background: var(--paper2); border: 1px solid var(--rule-dark);
  border-radius: var(--radius); padding: 8px; display: none;
  flex-direction: column; gap: 3px;
  box-shadow: 2px 2px 8px rgba(0,0,0,.15);
}
.table-picker.open { display: flex; }
.table-row-cells { display: flex; gap: 3px; }
.table-cell {
  width: 16px; height: 16px; border: 1px solid var(--rule-dark);
  cursor: pointer; transition: background .1s; border-radius: 1px;
}
.table-cell.hover { background: var(--ink-mid); border-color: var(--ink); }
.table-info { font-size: 9px; color: var(--ink-faint); text-align: center; margin-top: 2px; }

/* nb-inner active state */
#nb-inner {
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.nb-toolbar {
  flex-shrink: 0;
  display: block;
}

.nb-canvas-wrap {
  flex: 1;
  min-height: 0;
}

/* mark (highlight) fix */
mark {
  background-color: #FFFF00;
  color: inherit;
  padding: 0;
}