/* ══════════════════════════════════════════════════════════════
   Vellum — application chrome
   ══════════════════════════════════════════════════════════════ */

:root {
  /* dark app furniture, warm paper — the paper tokens live in book.css */
  --chrome:        #0e0e11;
  --chrome-2:      #17171c;
  --chrome-3:      #212128;
  --hair:          #2b2b33;
  --fg:            #e9e7e2;
  --fg-dim:        #9b9aa3;
  --fg-faint:      #63626c;
  --accent:        #8b6ef3;
  --accent-soft:   #8b6ef31f;
  --danger:        #ef6a6a;

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
        "Segoe UI", Roboto, system-ui, sans-serif;

  --topbar-h: 54px;
  --toolbar-h: 62px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

/* ─────────────────────────── scrollbars ─────────────────────────── */
/*
 * The platform's own scrollbar is a pale slab with stepper arrows on it, drawn
 * for a light desktop and dropped straight into the middle of a dark panel. It
 * is the one part of the interface that never got a say in how it looks. These
 * two rules — the standard properties for Firefox, the WebKit pseudo-elements
 * for everything Chromium — put it back under the same palette as everything
 * else: no buttons, no track, just a bar that darkens when you reach for it.
 */
* {
  scrollbar-width: thin;
  scrollbar-color: #35353f transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: #35353f;
  /* Inset by a transparent border so the bar looks narrower than the gutter it
     needs, and never touches the panel edge. */
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: #46464f; }
::-webkit-scrollbar-thumb:active { background-color: var(--fg-faint); }
/* The stepper arrows, which nothing in this interface has an equivalent of. */
::-webkit-scrollbar-button { display: none; }

/* Panels and the note card set `display`, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

/*
 * Selection policy.
 *
 * You turn a page by dragging it, so a caret sweeping a blue selection across
 * the paper is both ugly and meaningless — marking text is what the highlighter
 * is for. Nothing is selectable by default, including the app chrome, because a
 * drag that *starts* on the toolbar and crosses the book would otherwise select
 * as it went. Selection is switched back on only where copying text is the
 * whole point: notes, search results, the panels.
 */
body {
  font-family: var(--ui);
  background: var(--chrome);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* keep the book centred in the space between the two bars */
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

/* …and back on where reading and copying is the point. The note card floats
   directly over the paper and has no drag handle, so its chrome stays
   unselectable and only the text area itself opts back in. */
.panel__body,
.hit__text,
.hit__note,
.notecard textarea,
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
svg { display: block; }

/* ─────────────────────────── boot ─────────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: radial-gradient(120% 90% at 50% 40%, #191921 0%, #0b0b0e 70%);
  transition: opacity .5s var(--ease), visibility .5s;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot__mark { color: var(--accent); opacity: .9; }
.boot__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #ded9ee;
}
.boot__status { font-size: 12.5px; color: var(--fg-faint); letter-spacing: .02em; min-height: 1.2em; }
.boot__bar { width: 190px; height: 2px; background: #26262f; border-radius: 2px; overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s var(--ease); }

/* ─────────────────────────── topbar ─────────────────────────── */

.topbar {
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(#131318, #101014);
  border-bottom: 1px solid var(--hair);
  position: relative;
  z-index: 40;
}
.topbar__side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar__side--end { justify-content: flex-end; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 11px;
  border-radius: 999px;
  background: var(--chrome-3);
  color: var(--fg);
  font-size: 13.5px; font-weight: 560; letter-spacing: .01em;
  white-space: nowrap;
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.chip:hover { background: #2c2c35; }
.chip:active { transform: scale(.97); }
.chip--ghost { background: transparent; color: var(--fg-dim); }
.chip--ghost:hover { background: var(--chrome-3); color: var(--fg); }
.chip__caret { opacity: .55; }

.ico-night { display: none; }
[data-theme="night"] .ico-day { display: none; }
[data-theme="night"] .ico-night { display: block; }

.version-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--fg-faint);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 3px 6px;
}

.tabs { display: flex; gap: 2px; }
.tab {
  display: grid; justify-items: center; gap: 2px;
  padding: 5px 13px 4px;
  border-radius: var(--r-sm);
  color: var(--fg-faint);
  position: relative;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; }
.tab svg [fill="none"] { fill: none; }
.tab span { font-size: 10px; letter-spacing: .015em; font-weight: 550; }
.tab:hover { color: var(--fg-dim); background: #ffffff08; }
.tab.is-active { color: var(--fg); }
.tab.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 22px; height: 2px; border-radius: 2px; background: var(--accent);
  transform: translateX(-50%);
}
/* the Library glyph is a solid mark */
.tab[data-panel="library"] svg { fill: currentColor; stroke: none; }

/* ─────────────────────────── toolbar ─────────────────────────── */

.toolbar {
  height: var(--toolbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: linear-gradient(#101014, #131318);
  border-top: 1px solid var(--hair);
  position: relative; z-index: 40;
  overflow-x: auto;
  scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.toolbar__group { display: flex; align-items: center; gap: 2px; }
.toolbar__sep { width: 1px; height: 26px; background: var(--hair); flex: none; }
.toolbar__spacer { flex: 1 1 auto; min-width: 4px; }

.tool {
  display: grid; justify-items: center; gap: 2px;
  min-width: 52px; padding: 6px 8px 5px;
  border-radius: var(--r-sm);
  color: var(--fg-faint);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; }
.tool span { font-size: 10px; font-weight: 550; letter-spacing: .01em; }
.tool:hover:not(:disabled) { color: var(--fg-dim); background: #ffffff08; }
.tool.is-active { color: var(--fg); background: var(--chrome-3); }
.tool.is-active::after {
  content: ""; grid-area: 1/1; align-self: start; justify-self: center;
  width: 0; height: 0;
}
.tool:disabled { opacity: .3; cursor: default; }
.tool--icon { min-width: 38px; padding: 8px; }

/* the active drawing tool takes the ink colour */
.tool.is-active[data-tool="pen"],
.tool.is-active[data-tool="highlight"],
.tool.is-active[data-tool="underline"] { color: var(--ink-color, var(--fg)); }

.inkbar { display: flex; align-items: center; gap: 10px; transition: opacity .15s var(--ease); }
/* Dimmed while reading, but still live — pressing a colour picks up the pen. */
.inkbar.is-idle { opacity: .5; }
.inkbar.is-idle:hover, .inkbar.is-idle:focus-within { opacity: 1; }

/* ─────────────────────────── tool menu (right-click) ─────────────────────── */

.toolmenu {
  position: fixed; z-index: 160;
  display: flex; flex-direction: column;
  min-width: 196px; padding: 5px;
  background: var(--chrome-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: 0 12px 34px #0009, 0 2px 6px #0006;
  transform-origin: top left;
  animation: toolmenu-in .11s var(--ease);
}
@keyframes toolmenu-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .toolmenu { animation: none; } }

.toolmenu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 9px;
  border-radius: var(--r-sm);
  color: var(--fg-dim);
  text-align: left;
  transition: color .12s var(--ease), background .12s var(--ease);
}
.toolmenu__item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; }
.toolmenu__label { flex: 1 1 auto; font-size: 13px; font-weight: 500; }
.toolmenu__key {
  font: 500 10px/1 var(--ui);
  color: var(--fg-faint);
  padding: 3px 5px;
  border: 1px solid var(--hair);
  border-radius: 4px;
}
.toolmenu__item:hover, .toolmenu__item:focus-visible, .toolmenu__item:focus {
  color: var(--fg); background: var(--chrome-3); outline: none;
}
.toolmenu__item.is-active { color: var(--fg); }
.toolmenu__item.is-active .toolmenu__label::after {
  content: "";
  display: inline-block; margin-left: 7px; vertical-align: middle;
  width: 5px; height: 5px; border-radius: 999px; background: var(--accent);
}

/* What you are doing, above; what it looks like, below. */
.toolmenu__rule {
  height: 1px; margin: 6px 2px 3px;
  background: linear-gradient(to right, transparent, #34343f 18%, #34343f 82%, transparent);
}
.toolmenu__row {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 5px 4px;
}
.toolmenu__row--size { gap: 4px; padding: 2px 4px 4px; }
/* Reading or noting: nothing is being drawn, so the settings sit back. */
.toolmenu.is-reading .toolmenu__row { opacity: .5; }
.toolmenu.is-reading .toolmenu__row:hover,
.toolmenu.is-reading .toolmenu__row:focus-within { opacity: 1; }

.toolmenu__row .swatch { width: 22px; height: 22px; }
.toolmenu__row .swatch:focus-visible, .toolmenu__row .width:focus-visible,
.toolmenu__row .swatch:focus, .toolmenu__row .width:focus {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.toolmenu__row .width {
  width: 34px; height: 28px;
  border-radius: var(--r-sm);
  background: #ffffff08;
}
.toolmenu__row .width:hover { background: var(--chrome-3); }
.toolmenu__row .width.is-active { background: var(--chrome-3); box-shadow: inset 0 0 0 1px #ffffff14; }

.swatches { display: flex; gap: 5px; }
.swatch {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--c);
  position: relative;
  transition: transform .14s var(--ease);
  box-shadow: inset 0 0 0 1px #ffffff22;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active { transform: scale(1.06); }
.swatch.is-active::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 999px; border: 1.5px solid var(--c);
}
/* A swatch the reader has recoloured, so the shipped ones stay recognisable. */
.swatch.is-custom::before {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--fg); box-shadow: 0 0 0 1.5px var(--chrome);
}
.swatch--reset {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--fg-faint);
  color: var(--fg-faint);
  font: 13px/1 var(--ui);
}
.swatch--reset:hover { box-shadow: inset 0 0 0 1.5px var(--fg-dim); color: var(--fg); }
.swatch--reset::after {
  content: "↺"; position: absolute; inset: 0;
  display: grid; place-items: center;
}

.widths { display: flex; gap: 2px; }
.width {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  transition: background .14s var(--ease);
}
.width i {
  width: var(--d); height: var(--d); border-radius: 999px;
  background: var(--ink-color, var(--fg-dim));
}
.width:hover { background: #ffffff0d; }
.width.is-active { background: var(--chrome-3); }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--chrome-3);
  display: flex; align-items: center; padding: 2px;
  transition: background .18s var(--ease);
}
.switch__dot {
  width: 18px; height: 18px; border-radius: 999px; background: #6c6b76;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.switch input:checked + .switch__track { background: var(--accent-soft); }
.switch input:checked + .switch__track .switch__dot { transform: translateX(16px); background: var(--accent); }
.switch__label { font-size: 11.5px; color: var(--fg-dim); white-space: nowrap; }

/* ─────────────────────────── panels ─────────────────────────── */

.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: #05050799;
  backdrop-filter: blur(3px);
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0 } }

.panel {
  position: fixed; z-index: 100;
  background: var(--chrome-2);
  border: 1px solid var(--hair);
  color: var(--fg);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px #000000a8;
  animation: panel-in .26s var(--ease);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(.99) } }

.panel--nav {
  top: calc(var(--topbar-h) + var(--safe-t) + 8px);
  left: 50%; transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  max-height: min(660px, calc(100vh - var(--topbar-h) - var(--toolbar-h) - 40px));
  border-radius: var(--r-lg);
}
.panel--side {
  top: calc(var(--topbar-h) + var(--safe-t) + 8px);
  right: 10px;
  width: min(420px, calc(100vw - 20px));
  bottom: calc(var(--toolbar-h) + var(--safe-b) + 8px);
  border-radius: var(--r-lg);
  animation: side-in .26s var(--ease);
}
@keyframes side-in { from { opacity: 0; transform: translateX(16px) } }

.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px 11px 18px;
  border-bottom: 1px solid var(--hair);
  flex: none;
}
.panel__head h2 { margin: 0; font-size: 14px; font-weight: 640; letter-spacing: .01em; }
.panel__close {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--fg-faint);
}
.panel__close:hover { background: var(--chrome-3); color: var(--fg); }

.panel__tools { padding: 12px 14px; border-bottom: 1px solid var(--hair); display: grid; gap: 10px; flex: none; }
.panel__body { overflow: auto; padding: 12px 14px 18px; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.panel__empty { color: var(--fg-faint); font-size: 13px; line-height: 1.6; padding: 6px 2px; }

.panel input[type="text"], .panel input[type="search"], .panel textarea {
  width: 100%; height: 38px;
  background: var(--chrome-3); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 0 12px;
  font-size: 14px; outline: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.panel input:focus { border-color: var(--accent); background: #23232b; }
.panel input::placeholder { color: var(--fg-faint); }

.segmented { display: flex; gap: 2px; background: var(--chrome-3); border-radius: var(--r-sm); padding: 2px; }
.segmented button {
  flex: 1; height: 28px; border-radius: 6px;
  font-size: 12px; font-weight: 550; color: var(--fg-faint);
  transition: background .14s var(--ease), color .14s var(--ease);
  white-space: nowrap; padding: 0 8px;
}
.segmented button.is-active { background: #33333d; color: var(--fg); }

/* reference lookup */
.reflookup { padding: 12px 14px; border-bottom: 1px solid var(--hair); position: relative; flex: none; }
.reflookup__hits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.reflookup__hits:empty { display: none; }
.reflookup__hits button {
  padding: 5px 10px; border-radius: 999px; background: var(--chrome-3);
  font-size: 12.5px; color: var(--fg-dim);
}
.reflookup__hits button:hover, .reflookup__hits button.is-active { background: var(--accent-soft); color: #cbbcff; }

/* book grid */
.booklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px; }
.booklist + .booklist { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.booklist__label {
  grid-column: 1 / -1;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); margin: 0 0 4px 4px;
}
.bookbtn {
  text-align: left; padding: 7px 9px; border-radius: 7px;
  font-size: 13px; color: var(--fg-dim);
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.bookbtn:hover { background: var(--chrome-3); color: var(--fg); }
.bookbtn.is-current { background: var(--accent-soft); color: #cbbcff; }
.bookbtn i { font-style: normal; font-size: 10.5px; color: var(--fg-faint); }

.chapters { position: absolute; inset: 0; background: var(--chrome-2); border-radius: var(--r-lg); display: flex; flex-direction: column; }
.chapters__head { padding: 11px 14px; border-bottom: 1px solid var(--hair); flex: none; }
.chapters__back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--fg); }
.chapters__grid {
  overflow: auto; padding: 14px; flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px;
  align-content: start;
}
.chapbtn {
  height: 44px; border-radius: var(--r-sm);
  background: var(--chrome-3); color: var(--fg-dim);
  font-size: 14px; font-variant-numeric: tabular-nums;
  transition: background .14s var(--ease), color .14s var(--ease), transform .1s var(--ease);
}
.chapbtn:hover { background: #33333d; color: var(--fg); }
.chapbtn:active { transform: scale(.94); }
.chapbtn.is-current { background: var(--accent); color: #fff; }
.chapbtn.has-marks::after {
  content: ""; display: block; width: 4px; height: 4px; border-radius: 999px;
  background: currentColor; opacity: .5; margin: 2px auto 0;
}

/* result rows */
.hit {
  display: block; width: 100%; text-align: left;
  padding: 10px 11px; border-radius: var(--r-sm);
  transition: background .14s var(--ease);
}
.hit:hover { background: var(--chrome-3); }
.hit__ref { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; }
.hit__text {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 15px; line-height: 1.45; color: var(--fg-dim); margin-top: 2px;
}
.hit__text mark { background: #8b6ef333; color: #d9cfff; border-radius: 2px; padding: 0 1px; }
.hit__meta { font-size: 11px; color: var(--fg-faint); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.hit__dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.hit__note {
  font-size: 12.5px; color: var(--fg); margin-top: 6px; white-space: pre-wrap;
  border-left: 2px solid var(--accent); padding-left: 8px; line-height: 1.5;
}
.searchcount { font-size: 11.5px; color: var(--fg-faint); padding: 2px 2px 8px; }

/* library cards */
.libcard {
  border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 14px; margin-bottom: 10px;
}
.libcard h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 620; }
.libcard p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-faint); }
.libcard__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn {
  height: 32px; padding: 0 13px; border-radius: var(--r-sm);
  background: var(--chrome-3); font-size: 12.5px; font-weight: 550; color: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s var(--ease);
}
.btn:hover { background: #33333d; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #9b81f6; }
.btn--danger { color: var(--danger); }

/* settings rows */
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--hair); }
.setrow:last-child { border-bottom: 0; }
.setrow__label { font-size: 13px; }
.setrow__hint { font-size: 11.5px; color: var(--fg-faint); margin-top: 3px; line-height: 1.45; max-width: 30ch; }
.setrow__control { flex: none; }
.steppers { display: flex; align-items: center; gap: 2px; background: var(--chrome-3); border-radius: var(--r-sm); padding: 2px; }
.steppers button { width: 30px; height: 28px; border-radius: 6px; color: var(--fg-dim); font-size: 15px; }
.steppers button:hover { background: #383842; color: var(--fg); }
.steppers span { min-width: 62px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ─────────────────────────── note card ─────────────────────────── */

.notecard {
  position: fixed; z-index: 120;
  width: 268px;
  background: #fdf6dc; color: #2a2620;
  border-radius: 3px 3px 3px 12px;
  box-shadow: 0 18px 40px #0009, 0 2px 0 #0000001a;
  display: flex; flex-direction: column;
  animation: note-in .18s var(--ease);
  transform-origin: top left;
}
@keyframes note-in { from { opacity: 0; transform: scale(.94) rotate(-1deg) } }
.notecard__head {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 6px 5px 11px;
  border-bottom: 1px solid #0000000f;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8a7f63;
}
.notecard__head span { flex: 1; }
.notecard__head button {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #9a9078;
}
.notecard__head button:hover { background: #00000010; color: #4a4335; }
#noteDelete:hover { color: #b04a3a; }
.notecard textarea {
  width: 100%; min-height: 116px; resize: none;
  background: none; border: 0; outline: none;
  padding: 10px 12px 12px;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 16px; line-height: 1.5; color: #2a2620;
}
.notecard textarea::placeholder { color: #b0a58a; }

/* ─────────────────────────── toast ─────────────────────────── */

.toast {
  position: fixed; z-index: 150;
  left: 50%; bottom: calc(var(--toolbar-h) + var(--safe-b) + 18px);
  transform: translateX(-50%);
  background: #22222a; border: 1px solid var(--hair);
  border-radius: 999px; padding: 9px 16px;
  font-size: 12.5px; color: var(--fg);
  box-shadow: 0 10px 30px #0007;
  animation: toast-in .22s var(--ease);
  pointer-events: none;
  white-space: nowrap;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px) } }

/* ─────────────────────────── narrow screens ─────────────────────────── */

@media (max-width: 900px) {
  .tab span { display: none; }
  .tab { padding: 7px 10px; }
  .tool span { display: none; }
  .tool { min-width: 40px; padding: 8px; }
  .switch__label { display: none; }
}
@media (max-width: 640px) {
  :root { --topbar-h: 48px; --toolbar-h: 56px; }
  .version-badge { display: none; }
  .panel--side { left: 10px; width: auto; }
}

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

/* ─────────────────────────── voice recordings ─────────────────────────── */
/*
 * The same slip of paper the notes use, in the same place, so a recording reads
 * as another kind of note rather than as another kind of app.
 */
.voicecard {
  position: fixed; z-index: 120;
  width: 344px;
  background: var(--chrome-2); color: var(--fg);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px #000a, 0 2px 8px #0006;
  display: flex; flex-direction: column;
  animation: note-in .18s var(--ease);
  transform-origin: top left;
}
.voicecard .notecard__head {
  border-bottom: 1px solid var(--hair);
  color: var(--fg-dim);
  font: 500 12px/1 var(--ui);
}
.voicecard .notecard__head button { color: var(--fg-faint); }
.voicecard .notecard__head button:hover { color: var(--fg); }

.voicecard__body {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 12px;
}
.voicecard__play {
  flex: none;
  width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--chrome-3); color: var(--fg);
  transition: background .14s var(--ease), transform .14s var(--ease);
}
.voicecard__play:hover { background: #2c2c35; }
.voicecard__play:active { transform: scale(.94); }
.voicecard.is-recording .voicecard__play {
  background: #4a1f22; color: #ff8b8b;
  animation: voice-pulse 1.6s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #ef6a6a55; }
  50% { box-shadow: 0 0 0 7px #ef6a6a00; }
}
@media (prefers-reduced-motion: reduce) {
  .voicecard, .voicecard.is-recording .voicecard__play { animation: none; }
}

.voicecard__wave {
  flex: 1 1 auto; height: 44px; width: 100%;
  cursor: pointer; touch-action: none;
}
.voicecard__time {
  flex: none; min-width: 34px; text-align: right;
  font: 500 11px/1 var(--ui); color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.voicecard__hint {
  margin: 0; padding: 0 12px 11px;
  font: 400 11px/1.4 var(--ui); color: var(--fg-faint);
}
.voicecard__hint:empty { display: none; }

/* A recording's pin, so it is not mistaken for a written note at a glance. */
.pin--voice { color: #d98b4a; }

/* ─────────────────────────── sticker picker ─────────────────────────── */

.stickers {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  background: #0009;
  backdrop-filter: blur(3px);
}
.stickers__grid {
  display: grid; grid-template-columns: repeat(4, 62px); gap: 8px;
  padding: 14px;
  background: var(--chrome-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px #000b;
}
.stickers__one {
  width: 62px; height: 62px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: #ffffff08;
  transition: background .14s var(--ease), transform .14s var(--ease);
}
.stickers__one svg { width: 30px; height: 30px; }
.stickers__one:hover { background: var(--chrome-3); transform: scale(1.06); }
.stickers__one:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }