/* ===== Notes page (scoped) — Scratch Pad / RTE ===== */
/* All selectors are scoped to #view-notes so nothing leaks app-wide. */

#view-notes .notes-card { padding: 0; }

#view-notes .notes-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom:1px solid var(--border);
}
#view-notes .notes-header h3{
  margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2);
}
#view-notes .notes-actions{ display:flex; gap:8px; }

/* Toolbar */
#view-notes .rte-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
}
#view-notes .rte-group{
  display:flex; gap:6px; padding-right:6px;
  border-right:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
#view-notes .rte-group:last-child{ border-right:0; padding-right:0; }

#view-notes .rte-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--text-2);
  transition: background .15s, box-shadow .15s, transform .08s;
}
#view-notes .rte-btn:hover{
  background: color-mix(in oklab, var(--accent, #3a74ff) 10%, transparent);
  box-shadow: 0 2px 6px color-mix(in oklab, var(--accent, #3a74ff) 18%, transparent);
  color: var(--text);
}
#view-notes .rte-btn[aria-pressed="true"]{
  background: color-mix(in oklab, var(--accent, #3a74ff) 16%, transparent);
  border-color: color-mix(in oklab, var(--accent, #3a74ff) 40%, transparent);
  color: var(--text);
}
#view-notes .rte-status{ margin-left:auto; font-size:12px; color:var(--sub); }

/* Editor area */
#view-notes .rte-editor{
  padding:16px; min-height:320px; outline:none;
  background: var(--surface); color: var(--text);
  border:0; border-radius:0 0 14px 14px;
}
#view-notes .rte-editor:focus{
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent, #3a74ff) 28%, transparent);
  border-radius:0 0 14px 14px;
}

/* Content polish */
#view-notes .rte-editor h1, 
#view-notes .rte-editor h2 { margin: 1.2em 0 .5em; }
#view-notes .rte-editor h1{ font-size:1.6rem; }
#view-notes .rte-editor h2{ font-size:1.3rem; }
#view-notes .rte-editor blockquote{
  margin: .8em 0; padding: .6em .9em;
  border-left: 4px solid var(--accent, #3a74ff);
  background: color-mix(in oklab, var(--accent, #3a74ff) 8%, transparent);
  border-radius: 8px;
}
#view-notes .rte-editor code{
  padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in oklab, var(--text) 10%, transparent);
}

/* Task line */
#view-notes .rte-task{ margin: .4em 0; }
#view-notes .rte-task input{ transform: translateY(1px); }

/* Icon masks — scoped so they DON'T affect task-row icons elsewhere */
#view-notes .icon{
  inline-size:18px; block-size:18px; display:inline-block; background:currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
  vertical-align:-3px;
}
#view-notes .i-undo{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M9 14 4 9l5-5"/><path d="M20 20a8 8 0 0 0-8-8H4"/></svg>'); }
#view-notes .i-redo{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="m15 9 5 5-5 5"/><path d="M4 4a8 8 0 0 1 8 8h8"/></svg>'); }

#view-notes .i-bold{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M13 12a4 4 0 0 0 0-8H7v16h7a4 4 0 0 0 0-8H7"/></svg>'); }
#view-notes .i-italic{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M19 4h-9"/><path d="M14 20H5"/><path d="M15 4 9 20"/></svg>'); }
#view-notes .i-underline{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M6 3v7a6 6 0 1 0 12 0V3"/><path d="M4 21h16"/></svg>'); }
#view-notes .i-strike{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M16 7a4 4 0 0 0-8 0c0 3 4 3 8 5 3 1 4 2 4 4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4"/><path d="M4 12h16"/></svg>'); }
#view-notes .i-code{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/></svg>'); }
#view-notes .i-eraser{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="m19 14 3 3-5 5H8l-7-7L12 4l7 7Z"/><path d="M22 22H8"/></svg>'); }

#view-notes .i-h1{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M4 6v12"/><path d="M12 6v12"/><path d="M4 12h8"/><path d="M17 6v12"/></svg>'); }
#view-notes .i-h2{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M4 6v12"/><path d="M12 6v12"/><path d="M4 12h8"/><path d="M20 10a2 2 0 1 0-4 0c0 2 4 2 4 4a2 2 0 1 1-4 0"/></svg>'); }
#view-notes .i-quote{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M7 7h5v5H7z"/><path d="M7 17h5"/><path d="M16 7h5v5h-5z"/><path d="M16 17h5"/></svg>'); }

#view-notes .i-list-ul{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M8 6h13M8 12h13M8 18h13"/><path d="M3 6h.01M3 12h.01M3 18h.01"/></svg>'); }
#view-notes .i-list-ol{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M10 6h11M10 12h11M10 18h11"/><path d="M4 7V6h2v5M4 18h2M4 16h2"/></svg>'); }
#view-notes .i-check-square{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/></svg>'); }

#view-notes .i-link{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L10 5"/><path d="M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 1 0 7.07 7.07L14 19"/></svg>'); }
#view-notes .i-calendar-plus{ --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/><path d="M12 14v6M9 17h6"/></svg>'); }