/* ============================================================
   Inkwell — neumorphic chrome.

   One soft grey base runs through every surface. Nothing is
   separated by a border; things are raised or pressed into that
   base by a pair of opposing shadows, one warm-white from the
   top-left and one grey from the bottom-right. Two consequences
   worth knowing before editing anything below:

   1. A neumorphic element's background must match what's behind
      it. Give a button its own fill and it stops reading as an
      extrusion of the surface and starts reading as a card.
   2. Active/selected states go INSET rather than tinted, which
      is why so few rules here set a background colour.

   The paper is the deliberate exception — flat, white, hard
   edged. Soft shadows on the writing surface would fight the ink.
   ============================================================ */
/* ============================================================
   Inkwell — "Marginalia" design system.

   Warm paper rather than cool screen. One cream ground runs
   through the chrome; surfaces are separated by hairline warm
   rules and space, not by shadow or by a change of colour. The
   accent is a rust that reads as ink on paper, with sage as its
   quiet second.

   Two rules that keep it coherent:

   1. Serif is for names — the wordmark, a note's title, a
      subject. Sans is for everything the interface says about
      itself: labels, dates, counts, buttons that are verbs.
   2. Selected does not mean tinted-and-shadowed. It means a soft
      peach fill or a filled rust pill, and nothing else moves.

   The paper stays the lightest surface on screen so the eye
   settles there, and the ruling is warm brown rather than blue.
   ============================================================ */
:root {
  --chrome: #f5efe4;        /* the cream ground */
  --chrome-2: #eee6d7;      /* a hair recessed: hovers, wells */
  --desk: #eae2d3;          /* behind the page */
  --panel: #fbf8f1;         /* cards, popovers, the floating dock */
  --sidebar: #f5efe4;
  --ink: #241d17;           /* near-black, warm */
  --ink-2: #5c5044;
  --ink-3: #a2947f;
  --rule: #e2d8c6;          /* hairline separators */
  --accent: #c0703c;        /* rust */
  --accent-soft: #f7e4d3;   /* the selected-row peach */
  --sage: #7d9471;
  --warm: #b3452f;
  --rec: #b3452f;
  --star: #d0902f;
  --ok: #5f7d4f;
  --page-shadow: rgba(58,42,26,.20);

  /* Flat by default. Shadow is reserved for things that genuinely
     float above the page: the tool dock, popovers, dialogs. */
  --shadow-sm: 0 1px 2px rgba(58,42,26,.05);
  --shadow-md: 0 2px 10px rgba(58,42,26,.09);
  --shadow-lg: 0 10px 34px rgba(58,42,26,.16);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
}

/* Dark mode keeps the warmth: a deep brown-black, not a blue-grey,
   so the same rust and sage still belong. */
:root[data-theme="dark"] {
  --chrome: #211c17;
  --chrome-2: #2a241c;
  --desk: #191511;
  --panel: #272019;
  --sidebar: #211c17;
  --ink: #f0e8da;
  --ink-2: #c3b7a4;
  --ink-3: #8d8171;
  --rule: #3b3228;
  --accent: #d98d5a;
  --accent-soft: #3e2d1f;
  --sage: #9ab08d;
  --warm: #e08a72;
  --rec: #e08a72;
  --star: #e0a94b;
  --ok: #8fb47c;
  --page-shadow: rgba(0,0,0,.55);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 34px rgba(0,0,0,.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--sans);
  background: var(--desk);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.hidden { display: none !important; }
.view { position: fixed; inset: 0; }

button { font-family: inherit; font-size: 14px; color: var(--ink); background: none; border: none; cursor: pointer; }
input, select { font-family: inherit; }

.btn-primary {
  background: var(--accent); color: #fff;
  border-radius: var(--r-sm); padding: 9px 15px;
  font-weight: 500; font-size: 14px;
  transition: filter .14s, transform .06s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; }
.btn-small-solid { padding: 6px 14px; font-size: 13px; }

.btn-ghost { border-radius: var(--r-sm); padding: 8px 12px; color: var(--ink); transition: background .12s; }
.btn-ghost:hover { background: var(--chrome-2); }
.btn-ghost.danger { color: var(--warm); }
.btn-small { font-size: 13px; padding: 6px 10px; color: var(--ink-3); }

.mini-select {
  font-size: 13px; color: var(--ink-2);
  background: var(--chrome-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 6px 9px; outline: none; cursor: pointer;
}

/* ============ Auth ============ */
#authView {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(to bottom, transparent 0 43px, rgba(53,96,240,.05) 43px 44px),
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #eef0f4 60%, #e3e5ea 100%);
}
.auth-card {
  width: min(390px, calc(100vw - 40px));
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 42px 38px 30px;
  box-shadow: var(--shadow-lg); text-align: center; position: relative;
}
.auth-card::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  background: linear-gradient(to bottom, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  opacity: .55; border-radius: 3px;
}
.auth-logo { font-family: var(--serif); font-size: 38px; letter-spacing: -.015em; color: var(--ink); }
.auth-logo::after {
  content: ""; display: block; width: 34px; height: 2px; margin: 12px auto 0;
  background: var(--accent); border-radius: 2px; opacity: .85;
}
.auth-sub { color: var(--ink-3); font-size: 13.5px; margin: 14px 0 26px; }
#authForm { display: flex; flex-direction: column; gap: 10px; }
#authForm input {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 12px 13px; font-size: 14.5px; background: var(--chrome);
  color: var(--ink); outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-user-select: text; user-select: text;
}
#authForm input::placeholder { color: var(--ink-3); }
#authForm input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
#authForm .btn-primary { margin-top: 4px; padding: 12px; }
.auth-error { color: var(--warm); font-size: 13px; margin-top: 14px; line-height: 1.45; }
.auth-info { color: var(--ok); font-size: 13px; margin-top: 14px; line-height: 1.45; }
.auth-switch { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 500; }
.auth-switch a:hover { text-decoration: underline; }
.auth-demo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); }
.auth-demo a { color: var(--accent); text-decoration: none; font-weight: 500; }

#demoBanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--ink); color: #fff; font-size: 12.5px; padding: 6px 16px; text-align: center;
}
body.demo #libraryView, body.demo #editorView { top: 28px; }

/* ============ Library ============ */
#libraryView { display: flex; background: var(--desk); }

#librarySidebar {
  width: 258px; min-width: 258px;
  background: var(--sidebar); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; padding: 16px 10px 10px;
}
.sidebar-header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 8px 12px; }
.sidebar-title { font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; color: var(--ink); }

.search-wrap { position: relative; margin: 0 4px 12px; }
.search-wrap .search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-3); pointer-events: none;
}
#searchInput {
  width: 100%; border: 1px solid transparent; background: var(--chrome-2);
  border-radius: var(--r-sm); padding: 8px 10px 8px 30px; font-size: 13.5px;
  color: var(--ink); outline: none;
  -webkit-user-select: text; user-select: text;
}
#searchInput::placeholder { color: var(--ink-3); }
#searchInput:focus { border-color: var(--accent); background: #fff; }
#searchInput::-webkit-search-cancel-button { cursor: pointer; }

#folderTree { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.tree-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 13.8px; color: var(--ink-2); text-align: left;
  transition: background .12s, color .12s;
}
.tree-item:hover { background: var(--chrome-2); color: var(--ink); }
.tree-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.tree-item .tree-count { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tree-item.active .tree-count { color: var(--accent); opacity: .8; }
.tree-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); }
.tree-icon { width: 16px; height: 16px; flex: none; color: currentColor; }
.tree-item.divider-item {
  font-weight: 600; color: var(--ink-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; margin-top: 14px; padding-bottom: 3px;
}
.tree-item.divider-item:hover { background: transparent; color: var(--ink-2); }
.tree-item.subject-item.nested { padding-left: 14px; }

.tree-menu-btn { color: var(--ink-3); padding: 0 6px; border-radius: 5px; font-size: 15px; line-height: 1; }
.tree-menu-btn:hover { color: var(--ink); }
@media (hover: hover) {
  .tree-menu-btn { visibility: hidden; }
  .tree-item:hover .tree-menu-btn { visibility: visible; }
}
.sidebar-actions { display: flex; gap: 4px; padding-top: 9px; border-top: 1px solid var(--rule); }

#libraryMain { flex: 1; overflow-y: auto; padding: 26px 32px 60px; }
.library-topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
#libraryTitle { font-family: var(--serif); font-size: 29px; letter-spacing: -.015em; color: var(--ink); }
.library-subtitle { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.topbar-tools { display: flex; align-items: center; gap: 8px; }

.seg { display: flex; background: var(--chrome-2); border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.seg-btn { width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); }

#notesGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
#notesGrid.list-view { display: flex; flex-direction: column; gap: 1px; }

.note-card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .13s ease, box-shadow .13s ease;
}
.note-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.note-thumb { display: block; width: 100%; aspect-ratio: 1 / 1.24; background: #fff; border-bottom: 1px solid var(--rule); }
.note-card .note-body { padding: 11px 13px 13px; }
.note-card .note-title {
  font-weight: 500; font-size: 14px; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.note-card .note-meta { margin-top: 5px; font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.note-star { color: var(--star); width: 13px; height: 13px; flex: none; }
.note-card .card-menu-btn {
  position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 6px;
  color: var(--ink-2); background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0,0,0,.14); font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
.note-card:hover .card-menu-btn, .card-menu-btn:focus { opacity: 1; }
@media (hover: none) { .note-card .card-menu-btn { opacity: 1; } }

/* list view rows */
.list-view .note-card {
  display: flex; align-items: center; gap: 14px; border-radius: 0;
  border: none; border-bottom: 1px solid var(--rule); box-shadow: none;
  padding: 9px 10px; background: transparent;
}
.list-view .note-card:hover { transform: none; background: var(--panel); box-shadow: none; }
.list-view .note-thumb { width: 44px; height: 56px; aspect-ratio: auto; flex: none; border: 1px solid var(--rule); border-radius: 4px; }
.list-view .note-card .note-body { padding: 0; flex: 1; }
.list-view .note-card .note-title { -webkit-line-clamp: 1; }
.list-view .note-card .card-menu-btn { position: static; opacity: 1; background: none; box-shadow: none; }

.card-menu {
  position: absolute; top: 34px; right: 8px; z-index: 30;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 5px; display: flex; flex-direction: column; min-width: 156px;
}
.card-menu button { text-align: left; padding: 8px 11px; border-radius: 6px; font-size: 13.5px; color: var(--ink-2); }
.card-menu button:hover { background: var(--chrome); color: var(--ink); }

.empty-state { color: var(--ink-3); font-size: 14px; padding: 60px 0; text-align: center; grid-column: 1 / -1; line-height: 1.6; }
.empty-state strong { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink-2); margin-bottom: 6px; font-weight: 400; }

/* ============ Editor ============ */
#editorView { display: flex; flex-direction: column; background: var(--desk); }

#editorTopbar {
  display: flex; align-items: center; gap: 2px; padding: 6px 10px;
  background: var(--chrome); border-bottom: 1px solid var(--rule); z-index: 5;
}
#noteTitleInput {
  border: none; background: transparent; outline: none;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  padding: 5px 8px; border-radius: 6px; width: min(300px, 32vw);
  -webkit-user-select: text; user-select: text;
}
#noteTitleInput:hover { background: var(--chrome-2); }
#noteTitleInput:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-soft); }
.topbar-spacer { flex: 1; }

.tbtn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--ink-2); flex: none;
  transition: background .12s, color .12s;
}
.tbtn svg { width: 20px; height: 20px; }
.tbtn:hover { background: var(--chrome-2); color: var(--ink); }
.tbtn.active { background: var(--accent-soft); color: var(--accent); }
.tbtn.on { color: var(--accent); }
.tbtn.starred { color: var(--star); }
.tbtn.starred svg path { fill: var(--star); }
.tbtn.recording { color: var(--rec); }
.tbtn:disabled { opacity: .3; }

/* Save state has to be legible without a tooltip — iPad never shows one. */
.sync-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-left: 4px; }
.sync-chip.busy {
  background: var(--chrome-2); border: 1px solid var(--rule);
  border-radius: 999px; padding: 3px 10px 3px 8px;
}
#syncLabel { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.sync-chip.trouble #syncLabel { color: var(--warm); font-weight: 500; }
.sync-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34a06a; margin: 0 6px; flex: none;
  box-shadow: 0 0 0 3px rgba(52,160,106,.16); transition: background .3s, box-shadow .3s;
}
.sync-chip.busy .sync-dot { margin: 0; }
.sync-dot.pending { background: #d69324; box-shadow: 0 0 0 3px rgba(214,147,36,.16); }
.sync-dot.offline { background: #c2603a; box-shadow: 0 0 0 3px rgba(194,96,58,.16); }

#toolStrip {
  display: flex; align-items: center; gap: 1px; padding: 5px 10px;
  background: var(--chrome); border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
#toolStrip::-webkit-scrollbar { display: none; }
.strip-sep { width: 1px; height: 20px; background: var(--rule); margin: 0 8px; flex: none; }

/* Keep the swatch row on one line — as a plain inline span it wrapped into a
   grid once the palette sets grew to six. The strip itself scrolls instead. */
#colorSwatches { display: inline-flex; align-items: center; flex: none; }
.swatch {
  width: 21px; height: 21px; border-radius: 50%; margin: 0 3px; flex: none;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); transition: transform .12s;
}
.swatch:hover { transform: scale(1.13); }
.swatch.active { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 2px var(--chrome), 0 0 0 4px var(--ink); }
#customColor {
  width: 23px; height: 23px; border: none; padding: 0; background: none;
  border-radius: 50%; overflow: hidden; cursor: pointer; vertical-align: middle; margin: 0 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
#customColor::-webkit-color-swatch-wrapper { padding: 0; }
#customColor::-webkit-color-swatch { border: none; border-radius: 50%; }

#widthDots { display: inline-flex; align-items: center; flex: none; }
.wdot {
  width: 29px; height: 29px; border-radius: var(--r-sm); margin: 0 1px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: background .12s;
}
.wdot:hover { background: var(--chrome-2); }
.wdot.active { background: var(--accent-soft); }
.wdot i { background: var(--ink-2); border-radius: 50%; display: block; }
.wdot.active i { background: var(--accent); }

#canvasWrap { position: relative; flex: 1; overflow: hidden; }
#inkCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#objectLayer { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; }

/* page objects: latex, text boxes, images */
.latex-obj, .text-obj, .image-obj {
  position: absolute; color: var(--ink); cursor: grab;
  border-radius: 5px; border: 1.5px solid transparent;
  touch-action: none; /* iOS would otherwise claim the drag as a page pan */
}
.latex-obj { padding: 2px 4px; white-space: nowrap; }
.text-obj {
  padding: 3px 5px; white-space: pre-wrap; line-height: 1.35;
  min-width: 24px; outline: none; word-break: break-word;
}
.text-obj[contenteditable="true"] {
  cursor: text; -webkit-user-select: text; user-select: text;
  background: rgba(53,96,240,.05); border-color: var(--accent);
}
.image-obj { overflow: hidden; }
.image-obj img { display: block; width: 100%; height: 100%; pointer-events: none; }
.latex-obj.selectable, .text-obj.selectable, .image-obj.selectable { pointer-events: auto; }
.latex-obj.selected, .text-obj.selected, .image-obj.selected {
  border-color: var(--accent); background: rgba(53,96,240,.06);
}
.obj-actions {
  position: absolute; top: -36px; left: 0; display: flex; gap: 2px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 9px;
  box-shadow: var(--shadow-md); padding: 3px; white-space: nowrap;
}
.obj-actions button { font-size: 12.5px; padding: 5px 9px; border-radius: 6px; color: var(--ink-2); }
.obj-actions button:hover { background: var(--chrome); color: var(--ink); }
.obj-handle {
  position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px;
  background: var(--accent); border: 2px solid #fff; border-radius: 50%;
  cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.popover {
  position: absolute; z-index: 40;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 9px;
}
#selectionMenu, #moreMenu { display: flex; }
#moreMenu { flex-direction: column; min-width: 168px; }
#moreMenu .btn-ghost { text-align: left; font-size: 13.5px; }
#selectionMenu .btn-ghost { font-size: 13.5px; padding: 8px 11px; white-space: nowrap; color: var(--ink-2); }
#selLatexBtn { color: var(--accent) !important; font-weight: 500; }
.popover-label {
  font-size: 10.5px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600; margin: 5px 4px 6px;
}
.paper-styles, .pen-styles { display: flex; gap: 4px; }
.paper-styles button, .pen-styles button { padding: 7px 11px; border-radius: 7px; font-size: 13px; color: var(--ink-2); }
.paper-styles button:hover, .pen-styles button:hover { background: var(--chrome); }
.paper-styles button.active, .pen-styles button.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.paper-colors { display: flex; gap: 8px; padding: 4px; }
.paper-colors button { width: 27px; height: 27px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.paper-colors button.active { outline: 2px solid var(--accent); outline-offset: 2px; }
#penMenu { width: 226px; }
#widthSlider { width: 100%; margin: 2px 0 6px; accent-color: var(--accent); }
.width-preview { height: 22px; display: flex; align-items: center; justify-content: center; }
.width-preview span { display: block; background: var(--ink); border-radius: 50%; }

.latex-busy {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 13px;
  padding: 9px 18px; border-radius: 20px; z-index: 50; box-shadow: var(--shadow-md);
}

/* audio */
#audioBar, #recordBar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--chrome); border-top: 1px solid var(--rule);
}
.audio-btn {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.audio-btn svg { width: 17px; height: 17px; }
.audio-time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 34px; }
.audio-seek { flex: 1; accent-color: var(--accent); }
#recordBar { background: #fdf1f0; border-top-color: #f3cfcb; }
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--rec); flex: none;
  animation: recpulse 1.4s ease-in-out infinite;
}
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#recTime { font-size: 13px; font-weight: 600; color: var(--rec); font-variant-numeric: tabular-nums; }
.rec-label { font-size: 12.5px; color: var(--ink-2); flex: 1; }

/* Palette picker */
#paletteMenu { width: 268px; }
.palette-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 9px; border-radius: var(--r-sm);
  text-align: left; transition: background .12s;
}
.palette-row:hover { background: var(--chrome); }
.palette-row.active { background: var(--accent-soft); }
.palette-swatches { display: flex; flex: none; }
.palette-swatches i {
  width: 15px; height: 15px; border-radius: 50%;
  margin-left: -4px; display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 1.5px var(--panel);
}
.palette-swatches i:first-child { margin-left: 0; }
.palette-meta { display: flex; flex-direction: column; min-width: 0; }
.palette-name { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.palette-row.active .palette-name { color: var(--accent); }
.palette-note { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-hint {
  font-size: 11px; color: var(--ink-3); line-height: 1.45;
  padding: 8px 5px 2px; margin-top: 4px; border-top: 1px solid var(--rule);
}

/* Text formatting bar */
#textFormat { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.tf-group { display: inline-flex; align-items: center; gap: 2px; padding-left: 6px; border-left: 1px solid var(--rule); }
#textFormat .mini-select { padding: 5px 7px; font-size: 12.5px; }
.tf-btn {
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-2);
}
.tf-btn svg { width: 16px; height: 16px; }
.tf-btn:hover { background: var(--chrome-2); color: var(--ink); }
.tf-btn.active { background: var(--accent-soft); color: var(--accent); }
.tf-btn.danger { color: var(--warm); }
.tf-size { font-size: 12px; color: var(--ink-3); min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.tf-swatch {
  width: 17px; height: 17px; border-radius: 50%; margin: 0 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}
.tf-swatch.active { box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 2px var(--panel), 0 0 0 3.5px var(--ink); }

/* Page thumbnail rail */
#pageNav {
  position: absolute; top: 0; right: 0; bottom: 0; width: 132px; z-index: 35;
  background: var(--chrome); border-left: 1px solid var(--rule);
  overflow-y: auto; padding: 10px 8px 20px;
}
.pagenav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 600; margin: 2px 2px 8px;
}
.pagenav-item { position: relative; margin-bottom: 10px; cursor: pointer; }
.pagenav-item canvas {
  display: block; width: 100%; border: 1px solid var(--rule); border-radius: 4px;
  background: #fff; transition: border-color .12s, box-shadow .12s;
}
.pagenav-item:hover canvas { border-color: var(--accent); }
.pagenav-item.current canvas { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pagenav-num { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 3px; }

.sidebar-head-tools { display: inline-flex; align-items: center; gap: 2px; }
.tbtn-sm { width: 28px; height: 28px; }
.tbtn-sm svg { width: 16px; height: 16px; }

/* Shortcuts sheet */
#shortcutSheet {
  position: fixed; inset: 0; z-index: 310;
  background: rgba(28,28,30,.45); display: flex; align-items: center; justify-content: center;
}
.shortcut-card {
  background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 24px 26px; width: min(460px, 92vw); max-height: 80vh; overflow-y: auto;
}
.shortcut-card h2 { font-family: var(--serif); font-size: 21px; font-weight: 400; margin-bottom: 14px; }
.shortcut-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 13.5px; color: var(--ink-2); }
.shortcut-row + .shortcut-row { border-top: 1px solid var(--rule); }
.shortcut-row kbd {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  background: var(--chrome-2); border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 7px; color: var(--ink);
}

.btn-import {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-2);
  border: 1px solid var(--rule); background: var(--chrome-2);
}
.btn-import svg { width: 16px; height: 16px; }
.btn-import:hover { background: #fff; color: var(--ink); }

/* Study panel */
#studyPanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--panel); border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-lg); z-index: 90;
  display: flex; flex-direction: column;
}
body.demo #studyPanel { top: 28px; }
.study-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--rule);
}
.study-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.study-tabs { display: flex; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.study-tab {
  flex: 1; padding: 7px 8px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-3);
}
.study-tab:hover { background: var(--chrome-2); color: var(--ink-2); }
.study-tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.study-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.study-body h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin: 18px 0 8px; font-weight: 600;
}
.study-body h3:first-child { margin-top: 0; }
.study-summary { font-size: 14.5px; line-height: 1.62; color: var(--ink); }
.study-points { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.study-points li {
  font-size: 13.8px; line-height: 1.55; color: var(--ink-2);
  padding-left: 16px; position: relative;
}
.study-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.flashcard {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 15px 16px; margin-bottom: 10px; cursor: pointer;
  background: var(--chrome); transition: border-color .12s, background .12s;
}
.flashcard:hover { background: var(--chrome-2); border-color: var(--accent); }
.flashcard .fc-front { font-size: 14.2px; font-weight: 500; line-height: 1.5; }
.flashcard .fc-back {
  font-size: 13.6px; color: var(--ink-2); line-height: 1.55;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule);
}
.flashcard .fc-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
.quiz-q { margin-bottom: 20px; }
.quiz-q .q-text { font-size: 14.2px; font-weight: 500; line-height: 1.5; margin-bottom: 9px; }
.quiz-opt {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 9px 12px; margin-bottom: 6px; font-size: 13.5px; color: var(--ink-2);
  transition: background .12s, border-color .12s;
}
.quiz-opt:hover { border-color: var(--accent); background: var(--chrome); }
.quiz-opt.right { border-color: var(--ok); background: transparent; color: var(--ok); font-weight: 500; }
.quiz-opt.wrong { border-color: var(--warm); background: #fdf1f0; color: var(--warm); }
.study-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px; border-top: 1px solid var(--rule);
}
.study-meta { font-size: 11.5px; color: var(--ink-3); }
.study-empty { color: var(--ink-3); font-size: 13.5px; line-height: 1.6; text-align: center; padding: 40px 10px; }

/* Busy overlay for long jobs (PDF import, transcription) */
#busyOverlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(28,28,30,.42); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.busy-card {
  background: var(--panel); border-radius: var(--r-lg); padding: 26px 30px;
  box-shadow: var(--shadow-lg); text-align: center; min-width: 268px;
}
.busy-card p { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.busy-spinner {
  width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--chrome-2); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.busy-track { height: 4px; background: var(--chrome-2); border-radius: 3px; margin-top: 14px; overflow: hidden; }
#busyBar { height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .25s; }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 13.5px;
  padding: 11px 20px; border-radius: 22px; z-index: 100;
  max-width: min(80vw, 460px); text-align: center; line-height: 1.45;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 760px) {
  #librarySidebar { width: 202px; min-width: 202px; }
  #libraryMain { padding: 18px 16px 50px; }
  #libraryTitle { font-size: 23px; }
  #noteTitleInput { width: 30vw; font-size: 14px; }
  #notesGrid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 14px; }
  .rec-label { display: none; }
}

/* ============================================================
   Marginalia surface layer

   Everything above lays out the app; this dresses it. Kept as a
   trailing block so layout and skin stay separable — the look can
   be swapped by replacing this section and the tokens at the top.
   ============================================================ */

/* ---- names are set in serif ---- */
.sidebar-title, #libraryTitle, .auth-logo, .note-card .note-title,
.btn-primary, .empty-state strong, .popover-label {
  font-family: var(--serif);
}
.sidebar-title { font-size: 25px; letter-spacing: -.02em; font-weight: 600; }
#libraryTitle { font-weight: 600; letter-spacing: -.02em; }
/* The label span, not the dot and not the count — a subject is a name. */
.tree-item.subject-item > span:not(.tree-dot):not(.tree-count) {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
}

/* Meta text — counts, dates, section labels — is small letterspaced
   caps in sans. It is the interface talking about the content, so it
   deliberately never competes with it. */
.library-subtitle, .note-card .note-meta, .popover-label {
  font-family: var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--ink-3);
}
.popover-label { font-family: var(--sans); }

/* ---- flat controls ---- */
.tbtn, .tf-btn, .wdot, .audio-btn, .seg-btn, .tree-menu-btn, .card-menu-btn {
  background: transparent;
  box-shadow: none;
  border-radius: var(--r-sm);
  transition: background .14s, color .14s;
}
.tbtn:hover, .tf-btn:hover, .wdot:hover, .audio-btn:hover, .seg-btn:hover {
  background: var(--chrome-2);
  box-shadow: none;
  color: var(--ink);
}
.tbtn:active, .tf-btn:active, .wdot:active, .audio-btn:active { background: var(--rule); box-shadow: none; }
/* Selected is a soft peach fill and rust ink. Nothing lifts, nothing sinks. */
.tbtn.active, .tbtn.on, .tf-btn.active, .wdot.active {
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent);
}
.tbtn.starred { color: var(--star); background: transparent; }
.tbtn.recording { color: var(--rec); }
.tbtn:disabled { box-shadow: none; opacity: .3; }
.wdot.active i { background: var(--accent); }

.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: none; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 10px 18px;
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: none; }
.btn-primary:active { filter: brightness(.95); transform: none; box-shadow: none; }
.btn-primary:disabled { box-shadow: none; opacity: .45; }

.btn-ghost { transition: background .14s, color .14s; }
.btn-ghost:hover { background: var(--chrome-2); box-shadow: none; }
.btn-ghost:active { background: var(--rule); box-shadow: none; }

/* ---- fields sit in the page, outlined by a hairline ---- */
#authForm input, .mini-select, .quiz-opt {
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: none;
  border-radius: var(--r-sm);
}
#authForm input:focus {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#searchInput { background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: var(--r-sm); }
#searchInput:focus { background: var(--panel); border-color: var(--rule); box-shadow: none; }
.quiz-opt:hover { background: var(--chrome-2); box-shadow: none; border-color: var(--rule); }
.quiz-opt.right { background: var(--chrome-2); border-color: var(--ok); color: var(--ok); box-shadow: none; }
.quiz-opt.wrong { background: var(--chrome-2); border-color: var(--warm); color: var(--warm); box-shadow: none; }

/* The note title is the biggest thing in the editor, and it is a name. */
#noteTitleInput {
  font-family: var(--serif);
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  background: transparent; border: none; box-shadow: none;
  padding: 2px 6px; border-radius: 7px; width: 34vw;
}
#noteTitleInput:hover { background: var(--chrome-2); box-shadow: none; }
#noteTitleInput:focus { background: var(--panel); box-shadow: 0 0 0 2px var(--accent-soft); }

/* The subject a note lives in, set above its title. */
.title-stack { display: flex; flex-direction: column; gap: 0; min-width: 0; }
#noteCrumb {
  font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); padding-left: 7px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
#noteCrumb:empty { display: none; }

/* ---- panels ---- */
.popover, .card-menu, .auth-card, .busy-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-md);
}
.note-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: none;
  border-radius: var(--r-md);
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.note-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.note-card .note-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.note-thumb { border-bottom: 1px solid var(--rule); }
.list-view .note-card { box-shadow: none; border-color: transparent; border-radius: var(--r-sm); }
.list-view .note-card:hover { background: var(--chrome-2); transform: none; border-color: transparent; box-shadow: none; }
.list-view .note-thumb { border: 1px solid var(--rule); }
.seg { background: transparent; border: 1px solid var(--rule); box-shadow: none; border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg-btn { border-radius: 7px; }
.seg-btn.active { background: var(--accent); color: #fff; box-shadow: none; }
.strip-sep { background: var(--rule); opacity: 1; }

#editorTopbar { background: var(--chrome); border-bottom: 1px solid var(--rule); position: relative; z-index: 2; }
#librarySidebar { background: var(--sidebar); border-right: 1px solid var(--rule); box-shadow: none; }
.sidebar-actions { border-top: 1px solid var(--rule); }

/* Sidebar rows: the selected one takes the peach and a rust dot. */
.tree-item { transition: background .14s, color .14s; border-radius: 8px; }
.tree-item:hover { background: var(--chrome-2); box-shadow: none; }
.tree-item.active { background: var(--accent-soft); box-shadow: none; color: var(--accent); font-weight: 600; }
.tree-item.divider-item {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.tree-item.divider-item:hover { background: transparent; box-shadow: none; }
.tree-dot { width: 7px; height: 7px; }

/* ---- ink swatches read as beads of paint ---- */
.swatch, .tf-swatch, .paper-colors button, #customColor {
  box-shadow: inset 0 0 0 1px rgba(60,44,28,.14);
  transition: transform .14s, box-shadow .14s;
}
.swatch:hover, .tf-swatch:hover, .paper-colors button:hover { transform: scale(1.12); }
.swatch.active, .tf-swatch.active {
  transform: scale(1.06);
  box-shadow: inset 0 0 0 1px rgba(60,44,28,.14), 0 0 0 2px var(--panel), 0 0 0 3.5px var(--ink);
}
.paper-colors button.active { outline: none; box-shadow: inset 0 0 0 1px rgba(60,44,28,.14), 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); }

.paper-styles button, .pen-styles button, .palette-row,
.paper-swatch, .spacing-chip, .toggle-chip, .template-row {
  transition: background .14s, color .14s;
}
.paper-styles button:hover, .pen-styles button:hover, .palette-row:hover,
.paper-swatch:hover, .spacing-chip:hover, .toggle-chip:hover, .template-row:hover {
  background: var(--chrome-2); box-shadow: none;
}
.paper-styles button.active, .pen-styles button.active, .palette-row.active,
.paper-swatch.active, .spacing-chip.active, .toggle-chip.active, .template-row.active {
  background: var(--accent-soft); box-shadow: none; color: var(--accent);
}
.paper-mini { box-shadow: inset 0 0 0 1px var(--rule); }
.palette-swatches i { box-shadow: 0 0 0 1.5px var(--panel); }

/* ============================================================
   The tool dock

   Lifted out of the top bar and floated over the page, so the
   tools sit within reach of the hand rather than filed away in a
   menu bar. It is the one element allowed a real shadow, because
   it genuinely hovers above the paper.
   ============================================================ */
#toolStrip {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 6;
  width: max-content;
  max-width: calc(100% - 28px);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: var(--shadow-lg);
  gap: 3px;
}
/* Lift clear of the playback and recording bars when they appear. */
body:has(#audioBar:not(.hidden)) #toolStrip,
body:has(#recordBar:not(.hidden)) #toolStrip { bottom: 78px; }
/* The tool you are holding is a filled rust disc, like a selected nib. */
.tbtn.tool.active { background: var(--accent); color: #fff; }

/* ---- odds and ends ---- */
.sync-chip.busy { background: var(--chrome-2); box-shadow: none; border-radius: 20px; }
.busy-track, #widthSlider { border-radius: 20px; }
.busy-track { background: var(--chrome-2); box-shadow: none; }
.busy-spinner { border-color: var(--rule); border-top-color: var(--accent); }
#audioBar, #recordBar { background: var(--panel); border-top: 1px solid var(--rule); box-shadow: none; }
#toast { background: var(--ink); color: var(--chrome); box-shadow: var(--shadow-lg); }
.obj-actions, .latex-busy { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow-md); }
#busyOverlay { background: rgba(58,42,26,.34); }
.auth-card::before { display: none; }
#authView { background: var(--desk); }
#canvasWrap { background: var(--desk); }
#demoBanner { background: var(--ink); color: var(--chrome); box-shadow: none; }


/* ============================================================
   Typed-text layer

   One column per page, already in place inside the margins —
   click and type, no box to draw. The layer itself never takes
   pointer events so that panning and handwriting pass straight
   through; only the columns do, and only while the text tool is
   the active one.
   ============================================================ */
#textLayer {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.text-col {
  position: absolute;
  font-family: var(--sans);
  /* Size and line-height are set per note by TextFlow, because they follow the
     paper's ruling. The ink colour follows the paper colour — near-black text
     on a dark page would be unreadable. */
  color: var(--paper-ink, #1c1c1e);
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
  -webkit-user-select: text; user-select: text;
  /* Typed text has to be selectable when the text tool is up but must never
     grab the pen, so this is toggled rather than always on. */
}
.text-col.live { pointer-events: auto; cursor: text; }
/* A hairline down the left edge shows where the column is, but only while
   you're actually using it — otherwise the page should look like paper. */
.text-col.live::before {
  content: "";
  position: absolute; left: -18px; top: 2px; bottom: 2px; width: 2px;
  background: var(--accent); opacity: .18; border-radius: 2px;
}
.text-col.live:focus::before { opacity: .5; }
.text-col p, .text-col div { margin: 0; }
/* Inline formulas: typed as $x^2$, rendered in place. The tint is faint enough
   to read as "this is a formula" without competing with the maths itself. */
.tex-inline {
  display: inline-block;
  padding: 0 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  cursor: pointer;
  vertical-align: baseline;
}
.text-col.live .tex-inline:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tex-inline .katex { font-size: 1.02em; }
.text-col h1 { font-size: 40px; margin: 0 0 6px; font-weight: 600; }
.text-col h2 { font-size: 32px; margin: 0 0 4px; font-weight: 600; }
.text-col ul, .text-col ol { margin: 0; padding-left: 40px; }

/* ============================================================
   Page setup panel

   The paper swatches show a miniature of the actual ruling, so
   the choice is made by eye. Each mini is drawn with repeating
   gradients rather than an image, so it follows the spacing and
   costs nothing to load.
   ============================================================ */
#paperMenu { width: 296px; max-height: min(80vh, 720px); overflow-y: auto; }
.paper-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.paper-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 3px 7px; border-radius: 10px;
  transition: box-shadow .16s, color .16s;
}
.paper-swatch em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.paper-swatch:hover { background: var(--chrome-2); }
.paper-swatch.active { background: var(--accent-soft); }
.paper-swatch.active em { color: var(--accent); }

.paper-mini {
  display: block; width: 34px; height: 42px; border-radius: 4px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--rule);
  background-repeat: repeat; flex: none;
}
.paper-mini-lined    { background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(90,68,44,.34) 6px 7px); }
.paper-mini-grid     { background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(90,68,44,.30) 6px 7px), repeating-linear-gradient(to right, transparent 0 6px, rgba(90,68,44,.30) 6px 7px); }
.paper-mini-dotted   { background-image: radial-gradient(rgba(90,68,44,.46) 1px, transparent 1px); background-size: 7px 7px; }
.paper-mini-graph    { background-image: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(90,68,44,.34) 3px 4px), repeating-linear-gradient(to right, transparent 0 3px, rgba(90,68,44,.34) 3px 4px); }
.paper-mini-iso      { background-image: repeating-linear-gradient(60deg, transparent 0 6px, rgba(90,68,44,.32) 6px 7px), repeating-linear-gradient(-60deg, transparent 0 6px, rgba(90,68,44,.32) 6px 7px); }
.paper-mini-cornell  { background-image: linear-gradient(to right, transparent 0 10px, rgba(90,68,44,.46) 10px 11px, transparent 11px), linear-gradient(to bottom, transparent 0 32px, rgba(90,68,44,.46) 32px 33px, transparent 33px); }
.paper-mini-blank    { background-image: none; }

.spacing-row { display: flex; gap: 5px; }
.spacing-chip {
  flex: 1; padding: 7px 4px; border-radius: 9px; font-size: 11.5px; color: var(--ink-2);
  transition: box-shadow .16s, color .16s;
}
.spacing-chip:hover { background: var(--chrome-2); }
.spacing-chip.active { background: var(--accent-soft); color: var(--accent); }
.spacing-fine { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#spacingSlider { flex: 1; accent-color: var(--accent); }
.spacing-value {
  font-size: 11.5px; color: var(--ink-3); min-width: 26px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.paper-toggles { display: flex; gap: 6px; }
.toggle-chip {
  flex: 1; padding: 8px 6px; border-radius: 9px; font-size: 12px; color: var(--ink-2);
  transition: box-shadow .16s, color .16s;
}
.toggle-chip:hover { background: var(--chrome-2); }
.toggle-chip.active { background: var(--accent-soft); color: var(--accent); }

.template-list { display: flex; flex-direction: column; gap: 4px; }
.template-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 9px; transition: box-shadow .16s;
}
.template-row:hover { background: var(--chrome-2); }
.template-row.active { background: var(--accent-soft); }
.template-row .paper-mini { width: 20px; height: 25px; border-radius: 3px; }
.template-name {
  flex: 1; font-size: 12.5px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.template-name em { font-style: normal; font-size: 10px; color: var(--accent); }
.template-use { font-size: 11.5px; color: var(--accent); padding: 3px 7px; border-radius: 7px; }
.template-star { font-size: 13px; color: var(--ink-3); padding: 2px 4px; }
.template-star.on { color: var(--star); }
.template-del { font-size: 15px; color: var(--ink-3); padding: 0 5px; line-height: 1; }
.template-del:hover { color: var(--warm); }
.template-empty { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; padding: 2px 2px 4px; }
.template-actions { display: flex; gap: 6px; margin-top: 8px; }
.template-actions .btn-ghost { flex: 1; font-size: 12px; text-align: center; }

/* Docked at the top of the page area, the way a word processor's bar sits —
   the floating-over-a-box behaviour only makes sense for the old text boxes. */
#textFormat.docked {
  left: 50% !important;
  transform: translateX(-50%);
  top: 10px !important;
}
.obj-actions, .latex-busy { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-md); border: 1px solid var(--rule); }
#busyOverlay { background: rgba(160,172,188,.4); }
:root[data-theme="dark"] #busyOverlay { background: rgba(10,12,15,.55); }
.auth-card::before { display: none; }
#authView { background: var(--desk); }

/* The desk gets a faint vignette so the paper has something to sit on. */
#canvasWrap { background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.55), transparent 65%); }
:root[data-theme="dark"] #canvasWrap { background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.045), transparent 65%); }

/* Touch devices get bigger hit targets; the shadows need the room anyway. */
@media (pointer: coarse) {
  .tbtn { width: 44px; height: 44px; }
  .swatch { width: 26px; height: 26px; }
}

/* ============================================================
   Accessibility corrections

   Neumorphism removes borders and outlines, which is exactly
   what a keyboard user navigates by. These put a real ring back
   on top of the soft shadows, and stop the top bar from pushing
   its own buttons off a 768pt iPad screen.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.tbtn:focus-visible, .tf-btn:focus-visible, .swatch:focus-visible,
.seg-btn:focus-visible, .wdot:focus-visible, .paper-swatch:focus-visible,
.spacing-chip:focus-visible, .toggle-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#authForm input:focus-visible, #searchInput:focus-visible, #noteTitleInput:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The sync chip grows to "Can't reach the server - changes waiting", which on
   a 768pt iPad pushed the tool buttons past the right edge with no way back. */
#editorTopbar { overflow-x: auto; scrollbar-width: none; }
#editorTopbar::-webkit-scrollbar { display: none; }
.sync-chip { flex: 0 1 auto; min-width: 0; }
#syncLabel { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 820px) {
  #syncLabel { max-width: 32vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}