/* The look is glass, after iOS: controls sit on translucent panes that float over the content,
   blur and brighten what is behind them, and catch the light along their top edge. */
:root {
  --bg: #eef0f6;
  --canvas: #e3e6ee;
  --surface: #ffffff; /* what glass falls back to where it cannot be see-through */
  --text: #1c2030;
  --muted: #6f778c;
  --border: rgb(120 128 150 / .28);
  --accent: #2f6fed;
  --accent-soft: rgb(47 111 237 / .14);
  --danger: #d6336c;
  --radius: 22px;
  --shadow: 0 2px 6px rgb(20 25 40 / .07), 0 18px 48px rgb(20 25 40 / .14); /* the sheet of paper */
  --hit: 36px; /* button size */
  --thumb: linear-gradient(160deg, #f6f8fc, #e8ecf6);
  --faint: #aab1c3; /* dashed outlines, placeholder icons */

  /* Glass. --glass is a pane over content (toolbars); --glass-thick one with things to read on it
     (menus, panels, cards). --rim is the light on its edges, --sheen the glow across its top. */
  --glass: rgb(255 255 255 / .66);
  --glass-thick: rgb(255 255 255 / .82);
  --sheen: rgb(255 255 255 / .55);
  --rim: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .45), inset 0 -1px 0 rgb(20 25 40 / .05);
  --float: 0 1px 2px rgb(20 25 40 / .06), 0 10px 30px rgb(20 25 40 / .13); /* the shadow a pane casts */
  --blur: blur(22px) saturate(180%) brightness(1.06);
  --fill: rgb(110 120 145 / .14); /* a control on glass, hovered or holding something */
  /* soft light behind everything, so the glass has colour to pick up */
  --glow-a: rgb(96 130 255 / .22);
  --glow-b: rgb(255 120 196 / .15);
  --glow-c: rgb(70 205 190 / .13);
  color-scheme: light;
}

/* data-theme is set by the inline script in index.html and flipped by the theme buttons. */
:root[data-theme="dark"] {
  --bg: #101216;
  --canvas: #0a0b0e;
  --surface: #23262e;
  --text: #eceef3;
  --muted: #979eb1;
  --border: rgb(255 255 255 / .14);
  --accent: #74a2ff;
  --accent-soft: rgb(116 162 255 / .22);
  --danger: #ff6b93;
  --shadow: 0 2px 6px rgb(0 0 0 / .4), 0 18px 48px rgb(0 0 0 / .55);
  --thumb: linear-gradient(160deg, #23272f, #181b21);
  --faint: #5b6272;

  --glass: rgb(40 43 54 / .7);
  --glass-thick: rgb(36 39 48 / .8);
  --sheen: rgb(255 255 255 / .09);
  --rim: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 -1px 0 rgb(0 0 0 / .3);
  --float: 0 1px 2px rgb(0 0 0 / .35), 0 12px 34px rgb(0 0 0 / .5);
  --blur: blur(22px) saturate(170%) brightness(.72); /* a white page behind dark glass must not wash out what is on it */
  --fill: rgb(255 255 255 / .11);
  --glow-a: rgb(84 116 255 / .2);
  --glow-b: rgb(214 92 170 / .12);
  --glow-c: rgb(52 170 160 / .1);
  color-scheme: dark;
}

/* Where glass cannot be see-through (no backdrop blur), or the user has asked for less of it, it is solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme="dark"] { --glass: var(--surface); --glass-thick: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme="dark"] { --glass: var(--surface); --glass-thick: var(--surface); --blur: none; }
}

/* Fingers and styluses need bigger targets than a mouse. */
@media (pointer: coarse) {
  :root { --hit: 40px; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* No browser pinch-zoom or pull-to-refresh: they would zoom or reload the whole app, not the note. */
html, body { overscroll-behavior: none; touch-action: pan-x pan-y; }

body {
  margin: 0;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* A pane of glass. ponytail: the blur is the costly part on a slow device; if the toolbar ever makes
   drawing or zooming stutter, shorten --blur or take it off .strip. */
.strip, .flyout, #pen-panel, #message, .btn-secondary {
  background: linear-gradient(180deg, var(--sheen), transparent 48%), var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--rim), var(--float);
}
/* Panes that come and go (menus, the pen's settings, messages) grow out of where they hang and
   fade, rather than blinking. Where a browser cannot ease something on its way to `display: none`,
   they simply blink as before.
   They are placed with `transform` (--at, set where each is placed) and grow with the same
   `transform`: on the iPad, a second property moving an element drops its `transform` meanwhile. */
.flyout, #pen-panel, #message { transform: var(--at, translate(0)) scale(1); transition: opacity .16s ease, transform .26s cubic-bezier(.3, 1.35, .5, 1); }
@supports (transition-behavior: allow-discrete) {
  .flyout, #pen-panel, #message { transition: opacity .16s ease, transform .26s cubic-bezier(.3, 1.35, .5, 1), display .2s allow-discrete; }
}
.flyout, #pen-panel { transform-origin: 50% 0; }
.tool-wrap:not(.open) .flyout, #flyouts .flyout:not(.show), #pen-panel[hidden] { opacity: 0; transform: var(--at, translate(0)) scale(.92); }
#message[hidden] { opacity: 0; transform: var(--at, translate(0)) translateY(10px); }
@starting-style {
  .tool-wrap.open .flyout, .flyout.show, #pen-panel:not([hidden]) { opacity: 0; transform: var(--at, translate(0)) scale(.92); }
  #message:not([hidden]) { opacity: 0; transform: var(--at, translate(0)) translateY(10px); }
}

/* Panes with something to read on them are thicker. */
.flyout, #pen-panel, #message { background: linear-gradient(180deg, var(--sheen), transparent 40%), var(--glass-thick); }
/* A pane that hangs from a pane: not every browser lets it blur what is behind both, so it is
   nearly solid, and looks right either way. */
.strip .flyout { background: linear-gradient(180deg, var(--sheen), transparent 40%), color-mix(in srgb, var(--surface) 94%, transparent); }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Everything pressable gives a little under the finger. */
button, .card { transition: transform .16s cubic-bezier(.3, .7, .3, 1.4), background-color .16s, color .16s, box-shadow .2s; }
button:active:not(:disabled) { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  button, .card, .pen svg { transition: none; }
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- View switching ---------- */

#editor { display: none; }
body.editing #editor { display: flex; }
body.editing #library { display: none; }

/* ---------- Shared buttons ---------- */

.btn-primary {
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / .22), transparent 55%), var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 0 0 1px rgb(255 255 255 / .12), 0 8px 20px rgb(47 111 237 / .32);
  color: #fff;
  font-weight: 600;
}
.btn-secondary {
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
}

.icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
}
/* Switched on: a drop of tinted glass. */
.icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 0 0 1px rgb(47 111 237 / .14); }
/* Buttons labelled with text instead of an icon: the eraser's "Auto", the "16:9" window. */
.chip { width: auto; min-width: var(--hit); padding: 0 11px; font-size: 12px; font-weight: 600; color: var(--muted); }
.icon-btn:disabled { opacity: .35; cursor: default; }

@media (hover: hover) {
  .btn-primary:hover { filter: brightness(1.08); }
  .icon-btn:not(:disabled):not([aria-pressed="true"]):hover,
  #zoom-label:hover,
  #note-name:hover,
  #folder-name:hover { background-color: var(--fill); }
  .btn-secondary:hover { filter: brightness(1.04); }
  .side-item:not(.on):hover, #tabs button:not([aria-pressed="true"]):hover { background: var(--fill); }
}

/* ---------- Library ---------- */

/* A notes app's shell: a sidebar of places on the left, the notes on the right, and the notes are
   the colour. Flat and quiet, no glass: nothing is behind it to blur. */
#library {
  display: flex;
  height: 100vh;
  height: 100dvh;
  background: var(--canvas);
  overflow: hidden;
}
#side {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 268px;
  padding: 14px 12px 12px;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
body.side-hidden #side { display: none; }
.side-top { display: flex; align-items: center; gap: 2px; padding: 2px 0 8px; }
.side-top .mark { height: 17px; margin: 0 9px 0 10px; }
.side-brand { flex: 1; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.side-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
#side-folders { display: flex; flex-direction: column; gap: 2px; }
.side-item {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 13px;
  background: none;
  text-align: left;
  font-size: 15px;
  color: var(--text);
}
.side-item.sub { height: 42px; padding-left: 14px; }
.side-item .icon { flex: none; width: 19px; height: 19px; color: var(--muted); }
.side-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-count { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.side-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-item.on .icon, .side-item.on .side-count { color: var(--accent); }
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 2px 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.side-foot { padding-top: 8px; border-top: 1px solid var(--border); }
#backup-wrap { display: block; }
#backup-wrap .flyout { top: auto; bottom: calc(100% + 8px); left: 6px; --at: translate(0); transform-origin: 0 100%; }

#lib-main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.lib-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px 8px;
  background: var(--canvas);
}
#side-show { display: none; }
body.side-hidden #side-show { display: grid; margin-left: -8px; }
/* The title: the folder's name, large; typed over when it is a folder's. */
#folder-bar { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
#folder-bar #folder-name { flex: 0 1 auto; width: min(50vw, 420px); min-width: 0; max-width: 100%; height: 44px; padding: 0 10px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
@supports (field-sizing: content) { #folder-bar #folder-name { width: auto; field-sizing: content; } }
#folder-bar #folder-name:read-only { pointer-events: none; }
body:not(.in-folder) #folder-back, body:not(.in-folder) #folder-delete, body.in-videos #folder-delete { display: none; }
body:not(.in-folder) #folder-bar #folder-name { padding-left: 0; }
body.side-hidden:not(.in-folder) #folder-bar #folder-name { padding-left: 4px; }
.lib-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#add-note { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgb(47 111 237 / .35); }
#add-note-wrap .flyout { top: calc(100% + 8px); left: auto; right: 0; --at: translate(0); transform-origin: 100% 0; }
body.in-videos #add-note-wrap { display: none; } /* nothing is made in the recordings folder */

/* Search: a capsule that takes what room there is. */
#lib-find { display: flex; align-items: center; width: min(280px, 34vw); height: var(--hit); padding-left: 12px; border-radius: 999px; background: var(--fill); }
#lib-find > .icon { flex: none; color: var(--muted); }
#search {
  flex: 1;
  width: 0;
  min-width: 0;
  height: var(--hit);
  padding: 0 8px;
  border: 0;
  -webkit-appearance: none;
  appearance: none; /* no search-field look and no arrow of the browser's */
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
}
/* The button that clears the field is ours, so that every device has one; it is there when there is something to clear. */
#search::-webkit-search-cancel-button, #search::-webkit-search-decoration { display: none; }
#search:placeholder-shown + #search-clear { display: none; }
#search:focus-visible { outline: none; }
#lib-find:has(#search:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; } /* the whole capsule is the field */
body.in-videos #lib-find { display: none; } /* recordings are not notes */

/* The tabs, and the order. */
.lib-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 24px 6px; }
#tabs { display: flex; gap: 4px; }
#tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 500; color: var(--muted); }
#tabs button[aria-pressed="true"] { background: var(--fill); color: var(--text); font-weight: 600; }
body.in-videos .lib-tabs { visibility: hidden; }
#sort-wrap { display: flex; align-items: center; color: var(--muted); }
#sort {
  height: 32px;
  padding: 0 24px 0 8px;
  border: 0;
  -webkit-appearance: none;
  appearance: none; /* the device's own picker still opens */
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
  cursor: pointer;
}
#sort + .icon { width: 16px; height: 16px; margin-left: -24px; pointer-events: none; }

/* The notes: portrait pictures, each with its name under it. */
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 26px 22px;
  padding: 14px 24px 40px;
}
/* "Create": the first place in the grid, and a blank page to start on. */
#import-tile {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 500;
}
.create-plus {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: #fff;
}
.create-plus .icon { box-sizing: content-box; width: 22px; height: 22px; padding: 12px; border-radius: 50%; background: var(--accent); stroke-width: 2.2; }
.create-label { font-size: 13px; text-align: center; }

.card { position: relative; }
.card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: center;
}
.card-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  background: var(--thumb);
  box-shadow: 0 0 0 1px var(--border), 0 6px 18px rgb(0 0 0 / .18);
  color: var(--faint);
}
.card-thumb .icon { width: 40px; height: 40px; stroke-width: 1.2; }
.card-thumb .card-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* The picture of a note, laid over the blank sheet once it has loaded (app.js, fillPreview). The
   frame is the page at its real width, shrunk to the card; the ink is drawn over it to the same scale. */
.card-preview {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.card-preview.ready { opacity: 1; }
.card-preview iframe {
  display: block;
  width: 900px;  /* PAGE_WIDTH in app.js */
  height: 1200px; /* and THUMB_H: the card's picture is three to four */
  border: 0;
  background: #fff;
  transform: scale(var(--thumb-scale, .2));
  transform-origin: 0 0;
}
.card-preview svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-name, .card-date { display: block; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-name { margin-top: 10px; font-size: 13px; font-weight: 500; }
.card-date { margin-top: 2px; font-size: 11.5px; color: var(--muted); }

/* "More": a small button in the picture's corner, and the card's three actions in a bar over its foot. */
.card-more {
  position: absolute;
  top: 6px;
  right: 6px;
  --hit: 30px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 1px 4px rgb(0 0 0 / .2);
  color: var(--text);
}
.card-more .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.card-actions {
  position: absolute;
  left: 6px;
  right: 6px;
  display: none;
  justify-content: space-around;
  bottom: 56px; /* over the foot of the picture: the name and date under it are about this tall */
  padding: 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 2px 10px rgb(0 0 0 / .3);
}
.card.acting .card-actions { display: flex; }
.card-actions .icon-btn { position: relative; color: var(--text); }
.card-delete:hover { color: var(--danger); }
.card-delete { color: var(--danger); }
/* "Move to a folder": an icon with an invisible native <select> stretched over it. */
.card-move { cursor: pointer; }
.card-move select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; /* under 16px iOS zooms the page on focus */ }
.card-move[hidden] { display: none; }
/* The recordings: their own colour on the picture's ground. */
/* The menus over the notes are solid: the notes behind them must not show through the words. */
#add-note-wrap .flyout, #backup-wrap .flyout { background: var(--surface); }
.card.video .card-date { white-space: normal; }
/* A recording's picture has the video's own shape (set from the picture, app.js; 16:9 until it is there), and the card is wide enough for that to be seen. */
.card.video { grid-column: span 2; align-self: start; }
.card.video .card-thumb { aspect-ratio: 16 / 9; }
.card.video .card-thumb { color: #ff3b30; background: linear-gradient(160deg, rgb(255 59 48 / .2), rgb(255 59 48 / .07)); }

#empty { margin: 8px 24px 32px; text-align: center; color: var(--muted); }

/* Where there is no room for the sidebar beside the notes, it comes over them. */
@media (max-width: 899px) {
  #side { position: fixed; inset: 0 auto 0 0; z-index: 20; box-shadow: var(--float); }
  .lib-bar, .lib-tabs, #grid { padding-left: 16px; padding-right: 16px; }
  #side-show { display: grid; margin-left: -6px; }
  #lib-find { width: min(220px, 36vw); }
}

/* ---------- Editor ---------- */

#editor {
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(900px 520px at 4% -8%, var(--glow-a), transparent 70%),
    radial-gradient(760px 460px at 100% 0%, var(--glow-b), transparent 70%),
    var(--canvas);
}

/* The toolbar floats over the top of the note's window: the note passes beneath its glass. It is
   only as solid as its strips; a touch between them goes through to the note.
   (app.js knows its height: the note's first line rests just below it. See restTop there.) */
#toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
#toolbar .strip { pointer-events: auto; }

/* Each strip is a floating capsule of glass; strips and their contents wrap on narrow screens. */
.strip, .group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.strip {
  max-width: 100%;
  padding: 4px;
  border-radius: calc(var(--hit) / 2 + 4px); /* round ends on one row of buttons, soft corners on more */
}
.sep { width: 1px; height: 20px; margin: 0 7px; background: var(--border); }

/* A tool with a flyout: a panel that drops below the button (in the full-screen rail: out to its left). */
.tool-wrap { position: relative; display: flex; }
.flyout {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  --at: translateX(-50%);
  z-index: 5;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--radius);
}
.tool-wrap.open .flyout, .flyout.show { display: flex; }
/* The toolbar's flyouts live in a layer of their own over the screen, and are put beside their buttons by app.js. */
#flyouts { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#flyouts .flyout { pointer-events: auto; }
#flyouts .flyout { background: linear-gradient(180deg, var(--sheen), transparent 40%), color-mix(in srgb, var(--surface) 94%, transparent); }
/* A flyout that is a short menu: its buttons stacked, each as wide as the menu. */
.flyout.menu { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; white-space: nowrap; }
/* A line of a menu: plain, lighting up under the finger. Not glass on glass. */
.flyout.menu .btn-secondary { height: 40px; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 14px; text-align: left; font-weight: 500; }
.flyout.menu .btn-secondary:active { background: var(--fill); }
@media (hover: hover) {
  .flyout.menu .btn-secondary:hover { background: var(--fill); filter: none; }
}
/* A small corner mark on the eraser while it is the tool: there is more behind a second tap. */
#eraser-wrap > [aria-pressed="true"]::after,
#text-wrap > [aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  border: 3px solid transparent;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}
#eraser-range, #text-range { width: 150px; height: var(--hit); margin: 0; accent-color: var(--accent); touch-action: none; /* a finger drags the slider, not the page */ }
.dot-box { display: grid; place-items: center; flex: none; width: 46px; height: 46px; }
#eraser-dot { border-radius: 50%; border: 1.5px solid var(--muted); background: rgb(128 128 128 / .15); }

/* The tools stay in one line: when there are more than fit, the strip slides sideways under the finger
   (in the full-screen rail, up and down; see there). Its flyouts are not inside it: see #flyouts. */
#toolbar .strip:nth-child(2) {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#toolbar .strip:nth-child(2)::-webkit-scrollbar { display: none; }
#toolbar .strip:nth-child(2) .group { flex-wrap: nowrap; }
#toolbar .strip:nth-child(2) > *, #toolbar .strip:nth-child(2) .group > * { flex: none; }
.sep { flex: none; }

/* One line, always: the name, the tools and the zoom. The name and the zoom keep their size; the tools
   are centred between them, and slide sideways where they do not all fit (see above). */
#toolbar { flex-wrap: nowrap; }
#toolbar .strip:nth-child(1), #toolbar .strip:nth-child(3) { flex: none; }
#toolbar .strip:nth-child(2) { margin: 0 auto; min-width: 0; }

#note-name, #folder-name {
  width: 190px;
  max-width: 45vw;
  height: var(--hit);
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-overflow: ellipsis;
}
#note-name:focus, #folder-name:focus { background: var(--fill); }

.swatch::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: box-shadow .2s, scale .2s cubic-bezier(.3, 1.5, .45, 1);
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(128 128 128 / .5); /* keeps black and white visible on any surface */
}
.swatch[aria-pressed="true"] { background: none; box-shadow: none; }
.swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); scale: 1.08; }

/* ---------- Pens ---------- */

/* A pen in the tray stands tip up with its lower end out of sight, as if in a pot; the one in use
   stands taller, in a wash of its own colour. The picture is made in app.js (penPicture); --c is
   the pen's colour. */
.pen {
  flex: none;
  position: relative;
  width: 34px;
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  overflow: hidden;
}
.pen:active:not(:disabled) { transform: none; } /* a pen does not shrink when pressed: it rises */
.pen svg {
  position: absolute;
  left: 6px;
  top: 11px;
  width: 22px;
  height: 58.67px;
  overflow: visible; /* the glow pen's light reaches past its picture */
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .28));
  transition: transform .34s cubic-bezier(.3, 1.5, .45, 1); /* up past its place, and back: a little spring */
}
.pen[aria-pressed="true"] svg { transform: translateY(-10px); }
/* the wash of colour behind the pen in use */
.pen::before {
  content: "";
  position: absolute;
  inset: 22% 3px 0;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--c) 42%, transparent), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.pen[aria-pressed="true"]::before { opacity: 1; }
.pen .tip, .pen .band { fill: var(--c); transition: fill .25s; }
.pen .tip { stroke: rgb(128 128 128 / .7); stroke-width: .6; stroke-linejoin: round; } /* keeps a black or white tip visible */
.pen .nib { stroke: rgb(60 64 75 / .55); stroke-width: .5; stroke-linejoin: round; }
.pen .slit { fill: #3b3f4a; stroke: #3b3f4a; stroke-width: .7; stroke-linecap: round; }
.pen .spark { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; transition: stroke .25s; }
.pen .lit { filter: drop-shadow(0 0 2.5px var(--c)); }
.pen .barrel { stroke: rgb(255 255 255 / .16); stroke-width: .5; }
@media (hover: hover) {
  .pen:not([aria-pressed="true"]):hover svg { transform: translateY(-4px); }
}
/* a pen just added comes up into the tray */
.pen.new { animation: pen-in .5s cubic-bezier(.3, 1.4, .45, 1) backwards; }
@keyframes pen-in {
  from { transform: translateY(26px) scale(.7); opacity: 0; }
}

/* The settings of the pen in use. app.js places it (showPanel) inside #editor. */
#editor { position: relative; }
#pen-panel {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 8px;
  width: 244px;
  padding: 10px 14px 14px;
  border-radius: var(--radius);
  user-select: none;
  -webkit-user-select: none;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-row { display: grid; grid-template-columns: 1fr auto; align-items: center; font-size: 13px; color: var(--muted); }
.panel-row output { color: var(--text); font-variant-numeric: tabular-nums; }
.panel-row input { grid-column: 1 / -1; width: 100%; height: 30px; margin: 0; accent-color: var(--accent); touch-action: none; /* a finger drags the slider, not the page */ }
#pen-colors { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; gap: 2px; }
/* "Another colour": a rainbow until a colour of its own is chosen; the device's colour picker lies invisible over it. */
.swatch.custom { position: relative; cursor: pointer; }
.swatch.custom::before { background: conic-gradient(#e03131, #f08c00, #f5d000, #2f9e44, #1c7ed6, #7048e8, #e03131); }
.swatch.custom[aria-pressed="true"]::before { background: var(--c); }
.swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

#zoom-label {
  min-width: 52px;
  height: var(--hit);
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* While a pinch holds the sheet at fit-width (app.js, pinchMove). */
#zoom-label.caught { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* The window onto the note. It does not scroll: app.js places the sheet in it (see "the view" there). */
#scroller {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  overflow: clip; /* where supported: unlike `hidden`, the browser can then never scroll this box by itself */
  /* Every touch in the window, grey margin included, goes to ink.js; no long-press selection or callout menu on iOS. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Moved by a translate, and its own compositing layer, so that moving it redraws nothing. */
#mover {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* How far down the note the window is. Shown by app.js when the note is taller than the window. */
#scrollbar {
  position: absolute;
  top: 0;
  right: 3px;
  z-index: 5; /* over the toolbar: it shows where the note is, wherever that is */
  width: 4px;
  border-radius: 2px;
  background: var(--muted);
  opacity: .55;
  pointer-events: none;
}

/* 16:9: the whole editor, note and tools together, becomes the largest 16:9 window that fits the
   screen, letterboxed in black (for recording or presenting). */
html:has(body.wide.editing) { height: 100%; }
body.wide.editing {
  display: grid;
  place-items: center;
  height: 100%;
  container-type: size; /* the editor below is sized from this box (the cq units) */
  background: #000;
}
/* Both sizes are spelled out rather than using aspect-ratio: a box sized by aspect-ratio may grow to
   fit its content, and the note inside is far taller than the window.
   They are measured from the page's own box (cqw, cqh), not from the viewport (vw, dvh): inside the
   iPad app the viewport units came out at about half the screen, and the window with them. The
   viewport lines stay only for browsers too old to know the others. */
body.wide #editor {
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100cqw, calc(100cqh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  height: min(100cqh, calc(100cqw * 9 / 16));
  overflow: hidden;
  /* Dashed red lines where the window starts and ends. An outline sits just outside the box, so the
     window stays exactly 16:9 and the lines show only on the sides that have a black bar. */
  outline: 2px dashed #ff3b30;
  outline-offset: 2px; /* a clear gap: a recording of the window (which is cut at its very edge) never catches a sliver of red */
}

#page {
  position: relative;
  background: #fff;
  box-shadow: var(--shadow);
  transform-origin: 0 0;
}

#frame {
  display: block;
  width: 100%;
  border: 0;
  pointer-events: none;
}

/* Its own compositing layer, like the stroke being drawn (ink.js): erasing or moving ink then redraws the ink
   alone, not the note's pictures and text under it as well. */
#ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* ---------- Lasso ---------- */

/* The loop as it is drawn, then the box round what it took, with a handle on each corner. They are
   drawn in the ink's own svg by lasso.js, which also sets their sizes: the same on screen at any zoom. */
#ink .lasso { fill: none; stroke: var(--accent); }
#ink circle.lasso { fill: #fff; }
/* The bar by the box: a colour for the selected ink, or the bin. lasso.js places it, with `left` and
   `top` alone. Its width is its content's: left to itself, a bar placed near the right edge would wrap. */
#lasso-bar {
  position: absolute;
  z-index: 5;
  width: -webkit-max-content;
  width: max-content;
  user-select: none;
  -webkit-user-select: none;
}
#lasso-delete { color: var(--danger); }
/* Room for the Lasso button in the rail where the rail is shortest: the 16:9 window on an upright
   screen (469px on an 11" iPad; the page's own box is the container while that window is on). Its
   rows close up there, which is what lets a full tray of pens still fit. */
@container (orientation: portrait) {
  body.full #toolbar .strip:nth-child(2) { gap: 0; }
}

/* ---------- Full screen: the sheet gets the whole window, the tools become a thin rail on the right ---------- */

body.full #editor { flex-direction: row-reverse; }
body.full #toolbar {
  position: static; /* beside the note, not over it */
  flex: none; /* the note beside it must never squeeze it */
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 8px 8px 8px 0;
}
body.full #toolbar .strip { display: none; }
/* One button per row, centred vertically. The rail never scrolls (a scrolling box would clip the
   flyouts): when it is short of room, e.g. a 16:9 window in portrait, its buttons give up
   height instead, from 36px down to 22px. */
body.full #toolbar .strip:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  order: 0;
  margin: auto 0;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto; /* more tools than the screen is tall: the rail slides up and down */
  touch-action: pan-y;
}
/* Every rule here names #toolbar: the rail's sizes are for the rail, not for the other buttons on the
   screen (the pen's settings, the recording bar). */
body.full #toolbar .group { display: contents; } /* every button is a row of the rail itself */
body.full #toolbar .icon-btn { flex: none; height: 36px; }
body.full #toolbar .chip { width: var(--hit); padding: 0; font-size: 11px; }
body.full #toolbar .sep { flex: none; width: 22px; height: 1px; margin: 3px 0; }

/* Pens in the rail lie on their side, tip towards the note; the one in use reaches further out. */
body.full #toolbar .pen { flex: none; width: var(--hit); height: 30px; }
body.full #toolbar .pen svg { left: 50%; top: 50%; margin: -29.33px 0 0 -11px; transform: translateX(21px) rotate(-90deg); }
body.full #toolbar .pen[aria-pressed="true"] svg { transform: translateX(12px) rotate(-90deg); }
body.full #toolbar .pen:not([aria-pressed="true"]):hover svg { transform: translateX(17px) rotate(-90deg); }
body.full #toolbar .pen::before { inset: 3px 0 3px 30%; border-radius: 8px 3px 3px 8px; background: linear-gradient(270deg, color-mix(in srgb, var(--c) 42%, transparent), transparent); }
body.full #toolbar .pen.new { animation-name: pen-in-rail; }
@keyframes pen-in-rail {
  from { transform: translateX(26px) scale(.7); opacity: 0; }
}

/* A tool with a flyout of its own (the eraser and its size, "+" and its menu). In the rail the pair
   is one row; the button grows along a column to fill it (WebKit does not stretch a button across a flex row). */
body.full #toolbar .tool-wrap { flex-direction: column; flex: none; height: 36px; }
body.full #toolbar .tool-wrap > .icon-btn { flex: 1 1 0; min-height: 0; }
body.full #toolbar .flyout { top: 50%; left: auto; right: calc(100% + 12px); --at: translateY(-50%); transform-origin: 100% 50%; }

/* Buttons that only belong in the rail. */
body:not(.full) .rail-only { display: none; }

/* The toolbar's arrow: a small tab of glass at the toolbar's edge, pointing the way the tools will
   go. Tapped, the tools are put away (body.tools-off) and only the arrow is left, at the edge of
   the window, pointing back. It hangs from the toolbar's box, which has no size once the tools are
   gone, so the same rule places it both times.
   It is placed with top and left, never a transform: a pressed button is scaled with one. */
#tools-toggle {
  position: absolute;
  top: calc(100% + 1px);
  left: calc(50% - 24px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  pointer-events: auto;
  color: var(--muted);
  background: linear-gradient(180deg, var(--sheen), transparent 48%), var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--rim), 0 1px 4px rgb(0 0 0 / .18); /* a small thing casts a small shadow */
}
#tools-toggle .icon { width: 18px; height: 18px; }
body.tools-off #toolbar { padding: 0; }
body.tools-off #toolbar .strip { display: none; }
body.tools-off #tools-toggle .icon { transform: rotate(180deg); }
/* In full screen the tools are the rail at the right: the arrow is on the rail's left edge, half way down. */
body.full #toolbar { position: relative; }
body.full #toolbar #tools-toggle { top: calc(50% - 24px); left: auto; right: calc(100% + 2px); width: 22px; height: 48px; }
body.full #toolbar #tools-toggle .icon { transform: rotate(90deg); }
body.full.tools-off #toolbar { padding: 0; }
body.full.tools-off #toolbar .strip:nth-child(2) { display: none; }
body.full.tools-off #toolbar #tools-toggle .icon { transform: rotate(-90deg); }
/* ---------- New notebook (notebook.js) ---------- */

/* A sheet of thick glass in the middle of the screen, with the library dimmed behind it. It is
   sized from the screen it is in by percentages, not by viewport units (those came out wrong in
   the iPad app), and scrolls within itself if a small window cannot hold it. */
#notebook, #rename {
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  padding: 0; /* the form has the padding: a tap on the dialog itself is then one outside it, on the dimmed library */
  border: 0;
  border-radius: 28px;
  overflow-y: auto;
  color: var(--text);
  background: linear-gradient(180deg, var(--sheen), transparent 40%), var(--glass-thick);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--rim), var(--float);
  user-select: none;
  -webkit-user-select: none;
}
#notebook::backdrop, #rename::backdrop { background: rgb(12 14 20 / .4); }
/* It is placed by the browser, in the middle, with no transform of its own: so it can grow into place with one. */
#notebook[open], #rename[open] { animation: nb-in .24s cubic-bezier(.3, 1.25, .5, 1); }
@keyframes nb-in {
  from { opacity: 0; transform: scale(.95); }
}
#rename { width: min(460px, calc(100% - 32px)); }
#rn-name { width: 100%; height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--fill); color: inherit; font: inherit; font-size: 16px; /* under 16px iOS zooms the page on focus */ user-select: text; -webkit-user-select: text; }
#rn-where { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
#rn-folder { flex: 1; max-width: 70%; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--fill); color: var(--text); font: inherit; font-size: 16px; /* under 16px iOS zooms the page on focus */ }
#notebook form, #rename form { display: grid; gap: 18px; padding: 22px 24px; }
#notebook h2, #rename h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
/* The picture of the page beside the choices; under about 620px, above them. */
.nb-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
.nb-picture { display: grid; place-items: center; min-height: 190px; border-radius: 18px; background: var(--fill); }
#nb-sheet { overflow: hidden; border-radius: 2px; box-shadow: 0 1px 3px rgb(20 25 40 / .22), 0 8px 22px rgb(20 25 40 / .2); }
#nb-page { transform-origin: 0 0; } /* its size, paper and scale: notebook.js */
.nb-options { display: grid; align-content: center; gap: 8px; }
.nb-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px; min-height: var(--hit); font-size: 13px; color: var(--muted); }
.nb-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nb-choice .chip { padding: 0 14px; font-size: 13px; color: var(--text); }
.nb-choice .chip[aria-pressed="true"] { color: var(--accent); }
#nb-title {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
  user-select: text;
  -webkit-user-select: text;
}
#nb-spacing { width: 100%; height: 30px; margin: 0; accent-color: var(--accent); touch-action: none; /* a finger drags the slider, not the page */ }
#nb-spacing:disabled { opacity: .35; }
/* A template: a small square of the paper, in the colours chosen (--paper and --line, set by notebook.js), over its name. */
.nb-tile { display: grid; justify-items: center; gap: 5px; width: 64px; padding: 7px 0 5px; border: 0; border-radius: 14px; background: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.nb-tile span { width: 44px; height: 44px; border-radius: 7px; background-color: var(--paper); box-shadow: inset 0 0 0 1px rgb(128 128 128 / .5); }
.nb-tile[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.nb-tile[data-value="rule"] span { background-image: linear-gradient(transparent 8px, var(--line) 8px); background-size: 100% 9px; }
.nb-tile[data-value="grid"] span { background-image: linear-gradient(transparent 8px, var(--line) 8px), linear-gradient(90deg, transparent 8px, var(--line) 8px); background-size: 9px 9px; background-position: center; }
.nb-tile[data-value="dot"] span { background-image: radial-gradient(circle, var(--line) 1.2px, transparent 1.7px); background-size: 9px 9px; background-position: center; }
.nb-tile[data-value="cornell"] span {
  background-image: linear-gradient(transparent 8px, var(--line) 8px), linear-gradient(90deg, transparent 12px, var(--line) 12px, var(--line) 13px, transparent 13px), linear-gradient(transparent 36px, var(--line) 36px, var(--line) 37px, transparent 37px);
  background-size: 100% 9px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
}
.nb-tile[data-value="planner"] span {
  background-image: linear-gradient(transparent 10px, var(--line) 10px), linear-gradient(90deg, transparent 21px, var(--line) 21px);
  background-size: 100% 11px, 22px 100%;
}
.nb-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 620px) {
  .nb-body { grid-template-columns: minmax(0, 1fr); }
  .nb-picture { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  #notebook[open], #rename[open] { animation: none; }
}

/* ---------- Add space (space.js) ---------- */

/* The marks of the Add space mode lie over the sheet, in #mover: they move with it, but are not
   scaled with it, so they are the same size under the finger at any zoom. space.js places each by
   its edges; none is placed with a transform. Only the buttons take touches. */
#space { position: absolute; inset: 0; pointer-events: none; }
#space button { pointer-events: auto; touch-action: none; }
/* Where room can be made: a line across the sheet with a "+" in the middle of it. */
.space-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--accent); }
.space-add {
  position: absolute;
  left: calc(50% - 22px);
  top: -23px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(255 255 255 / .22), transparent 55%), var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 4px 14px rgb(20 25 40 / .32);
  color: #fff;
}
.space-add .icon { stroke-width: 2.4; }
.space-line.end .space-add { top: -54px; } /* at the foot of the sheet: kept on it */
/* A gap that is open: its outline, with a button to remove it and, at its foot, a handle to drag. */
.space-zone { position: absolute; left: 0; right: 0; border: 2px dashed var(--accent); background: var(--accent-soft); }
/* Nearly solid, and no blur: there may be many of these, over a page of ink. */
.space-pill, .space-grip {
  position: absolute;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--rim), var(--float);
  color: var(--text);
}
.space-pill { height: 40px; padding: 0 16px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.space-grip { left: calc(50% - 38px); bottom: -23px; display: grid; place-items: center; width: 76px; height: 44px; cursor: ns-resize; }

/* ---------- Screen recording (the iPad app) ---------- */

/* The bar reads from the left: the button that puts it away, the clock, then the controls. Put away
   it is just its left end, in the corner. Which parts are there is decided here; the movement from
   one shape to the next is made in app.js (morph). */
#rec-bar {
  display: none;
  position: fixed;
  /* In the middle, by its margins, and as wide as what is in it: no transform has a hand in where
     it is (see morph in app.js for why). */
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: fit-content;
  z-index: 8;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 4px 5px;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
#rec-bar > * { flex: none; }
/* Offered whenever a note is open; and always there while recording, wherever the user goes, so it can be stopped.
   Without the 16:9 window there is no black band to keep it in: it floats over the foot of the note, and is in the video. */
body.can-record.editing #rec-bar,
body.recording #rec-bar { display: flex; }
/* Under the 16:9 window, in the middle of the black band there: the video is that window and nothing
   else, so the bar is never in it. (The band is half of what the window leaves of the page's height.) */
body.wide.editing #rec-bar {
  /* the middle of the band, less half the bar's own height (a button and the padding round it) */
  bottom: calc((100cqh - min(100cqh, 100cqw * 9 / 16)) / 4 - (var(--hit) + 8px) / 2);
}

/* Not there: Pause and the clock when nothing is recording; the settings while something is (they
   cannot change then). */
body:not(.recording) #rec-pause, body:not(.recording) #rec-time,
body.recording #rec-mic, body.recording #rec-enhance, body.recording #rec-quality { display: none; }
/* Put away: in the corner, hanging from its left edge; in the 16:9 view that corner is still in the
   black band. Only its left end is there. (While it is still on its way, .moving, the rest stays to
   be closed over.) */
#rec-bar.min { left: 14px; right: auto; margin: 0; }
#rec-bar.min:not(.moving) > :not(#rec-min, #rec-time) { display: none; }
/* On the move: the bar is where, and as wide as, app.js says, and what does not fit yet is out of
   sight. What is coming into view fades in; what is being closed over fades out. */
#rec-bar.moving { right: auto; margin: 0; overflow: hidden; }
#rec-bar.moving > :not(#rec-min, #rec-time) { animation: rec-part .34s ease both; }
#rec-bar.moving.min > :not(#rec-min, #rec-time) { animation: rec-part .22s ease reverse both; pointer-events: none; }
@keyframes rec-part {
  from { opacity: 0; }
}

#rec-btn { display: flex; align-items: center; gap: 7px; color: var(--text); }
.rec-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; transition: border-radius .25s; }
body.recording #rec-btn .rec-dot { border-radius: 3px; } /* a square: stop */
/* A set width, not a least one: Safari sizes the bar as if a least width were not there, and the last button then hangs out of it. */
#rec-time { width: 58px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: #ff3b30; }
body.paused #rec-time { color: var(--muted); }
#rec-pause { color: var(--text); }
#rec-quality {
  height: var(--hit);
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none; /* the device's own picker still opens; only the closed look is ours */
  background: var(--fill);
  color: inherit;
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
}
/* Intro here: while paused, to put the intro there; after that, while recording, to show where it is. */
#rec-intro-here { font-variant-numeric: tabular-nums; }
body:not(.paused) #rec-intro-here[aria-pressed="false"], body:not(.recording) #rec-intro-here { display: none; }
#rec-bar :disabled { opacity: .45; }
/* The button that puts the bar away is an arrow towards the corner; away, it is the red dot that
   brings the bar back (beating slowly while a recording runs, so it is not forgotten). One turns
   into the other. */
#rec-min { position: relative; }
#rec-min[aria-pressed="true"] { background: none; box-shadow: none; color: inherit; }
#rec-min > * { position: absolute; inset: 0; margin: auto; transition: opacity .26s, scale .36s cubic-bezier(.3, 1.5, .45, 1), rotate .36s; }
#rec-min .rec-dot, #rec-bar.min #rec-min .icon { opacity: 0; scale: .3; }
#rec-bar.min #rec-min .icon { rotate: 180deg; }
#rec-bar.min #rec-min .rec-dot { opacity: 1; scale: 1; }
/* No pulsing dot while recording: an animation that never ends changes the screen every frame, so the
   recorder and its encoder would never rest between strokes. The clock beside the dot ticks instead. */
@media (prefers-reduced-motion: reduce) {
  .flyout, #pen-panel, #message, #rec-min > * { transition: none; }
  .pen.new, #rec-min .rec-dot, #rec-bar.moving > * { animation: none !important; }
}

/* The countdown's switch is a setting like the others: not there while recording. The mic check's
   picture is there only while the check is switched on and within reach (it needs the microphone);
   the shape button only while the camera bubble is. */
body.recording #rec-count-btn,
#rec-bar:not(.check) #rec-waves, #rec-check:disabled + #rec-waves,
#rec-bar:not(.cam) #rec-shape { display: none; }
/* What the microphone hears, drawn by app.js: twelve bars, the newest on the right. A set size, like the clock's. */
#rec-waves { width: 58px; height: 28px; color: var(--accent); }
/* The shape the camera bubble has now; a tap steps to the next. */
#rec-shape span { width: 18px; height: 18px; border: 1.8px solid currentColor; border-radius: 50%; transition: width .2s, height .2s, border-radius .2s; }
#rec-shape[data-shape="square"] span { border-radius: 5px; }
#rec-shape[data-shape="wide"] span { width: 22px; height: 15px; border-radius: 4px; }
#rec-shape[data-shape="tall"] span { width: 15px; height: 22px; border-radius: 4px; }

/* The countdown before a recording: 3, 2, 1 on a disc of glass in the middle of the note's window
   (app.js gives this box that window's place and size). Over everything; every touch goes through it.
   The disc is placed by the grid, so its `transform` is free for coming and going. */
#rec-count { position: fixed; z-index: 9; display: grid; place-items: center; pointer-events: none; }
#rec-count span {
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sheen), transparent 48%), var(--glass-thick);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--rim), var(--float);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  animation: rec-count 1s ease both;
}
@keyframes rec-count {
  from { opacity: 0; transform: scale(.7); }
  18%, 80% { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  #rec-count span { animation: none; }
  #rec-shape span { transition: none; }
}

/* The check before recording: a card in the middle of the note's window (app.js gives #precheck that window's
   place and size, as for the countdown). A row each: the name, then what was found; a warning is red. */
#precheck { position: fixed; z-index: 9; display: grid; place-items: center; pointer-events: none; }
#precheck[hidden] { display: none; }
.pc-card {
  width: min(360px, calc(100% - 32px));
  padding: 18px 20px 16px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--sheen), transparent 40%), var(--glass-thick);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--rim), var(--float);
  pointer-events: auto;
  animation: pc-in .32s cubic-bezier(.3, 1.3, .5, 1) both;
}
@keyframes pc-in { from { opacity: 0; transform: scale(.92); } }
.pc-card h3 { margin: 0 0 8px; font-size: 18px; }
.pc-row { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.pc-row span { flex: 1; color: var(--muted); }
.pc-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-row b.warn { color: var(--danger); }
#pc-waves { width: 58px; height: 28px; color: var(--accent); }
#pc-waves[hidden] { display: none; }
.pc-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.pc-buttons .btn-secondary { background: var(--fill); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .pc-card { animation: none; } }

/* ---------- Toast ---------- */

#message {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  --at: translateX(-50%);
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 11px 18px;
  border-radius: 20px;
  font-weight: 500;
}
/* With the 16:9 window on: at the top instead, in the black band above the window, clear of both
   the picture and the recording bar. Otherwise, where there is a recording bar: just above it. */
body.wide.editing #message { top: 14px; bottom: auto; }
body.can-record.editing:not(.wide) #message,
body.recording:not(.wide) #message { bottom: 76px; }
/* On the black bands of the 16:9 view the glass is always the dark kind, whatever the theme. */
body.wide.editing #rec-bar,
body.wide.editing #message {
  --text: #eceef3;
  --muted: #979eb1;
  --accent: #74a2ff;
  --accent-soft: rgb(116 162 255 / .22);
  --glass: rgb(40 43 54 / .7);
  --glass-thick: rgb(36 39 48 / .8);
  --sheen: rgb(255 255 255 / .09);
  --rim: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 -1px 0 rgb(0 0 0 / .3);
  --fill: rgb(255 255 255 / .11);
  color: var(--text);
  color-scheme: dark;
}

/* ---------- Export (export.js) ---------- */

/* The frame a browser prints a note from: there, so that it can be printed, and out of sight. */
#print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

/* ---------- Pages (thumbs.js) ---------- */

/* A column of glass over the note's left edge. app.js sets its top (below the toolbar). */
#pages-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  width: 152px;
  padding: 6px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sheen), transparent 40%), var(--glass-thick);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--rim), var(--float);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#pages-list { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 6px 4px 8px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.thumb { position: relative; flex: none; display: grid; justify-items: center; gap: 4px; }
.thumb-sheet {
  position: relative;
  width: 120px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--border), 0 3px 10px rgb(0 0 0 / .18);
  transition: box-shadow .2s, transform .2s;
}
.thumb.on .thumb-sheet { box-shadow: 0 0 0 2.5px var(--accent), 0 3px 10px rgb(0 0 0 / .18); }
.thumb.lifted .thumb-sheet { transform: scale(1.06); box-shadow: 0 0 0 2.5px var(--accent), 0 10px 24px rgb(0 0 0 / .35); }
.thumb-paper { position: absolute; left: 0; top: 0; width: 900px; transform-origin: 0 0; }
.thumb-bg { display: block; width: 100%; height: 100%; }
.thumb-paper iframe { pointer-events: none; } /* the promo cover (cover.js) must not take the tap that goes to the page */
.thumb-n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.thumb.on .thumb-n { color: var(--accent); font-weight: 600; }
.thumb-more { position: absolute; right: 2px; bottom: 0; --hit: 28px; color: var(--muted); }
.thumb-more .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.thumb-line { position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 2px; background: var(--accent); pointer-events: none; }

/* The menu of a page: solid, beside the column. */
#page-menu {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 232px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--rim), var(--float);
  user-select: none;
  -webkit-user-select: none;
}
#page-menu .btn-secondary { height: 40px; padding: 0 14px; border-radius: 14px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: left; font-weight: 500; }
#page-menu .btn-secondary:active { background: var(--fill); }
#page-menu .btn-secondary.danger { color: var(--danger); }
.menu-head { margin: 8px 6px 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.menu-swatches { display: flex; flex-wrap: wrap; gap: 2px; }
.menu-swatches .chip[aria-pressed="true"] { color: var(--accent); }

/* ---------- Text boxes and pictures (items.js) ---------- */

/* Between the paper and the ink. Touches go through them to the ink's window; only a text field being typed in takes them. */
#items { position: absolute; inset: 0; overflow: hidden; overflow: clip; /* clip: the browser can then never scroll it to show a caret */ pointer-events: none; }
#items .item { position: absolute; margin: 0; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
#items img.item { display: block; max-width: none; }
.item-edit {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  background: transparent;
  resize: none;
  overflow: hidden;
  pointer-events: auto;
  caret-color: currentColor;
  user-select: text;
  -webkit-user-select: text;
  -webkit-appearance: none;
  appearance: none;
}
/* The size of the letters: a sample of them beside the slider. */
#text-sample { display: grid; place-items: center; flex: none; width: 46px; height: 46px; font-weight: 600; line-height: 1; }
/* A card's picture of the note shows its items too: a layer the size of the page, shrunk like the frame. */
.card-preview .card-items { position: absolute; left: 0; top: 0; width: 900px; height: 1200px; overflow: hidden; transform: scale(var(--thumb-scale, .2)); transform-origin: 0 0; }

/* ---------- The pen's shadow (ghost.js) and settings ---------- */

/* Placed by ghost.js with one transform: the tip is where the pen is, the shadow lies back from it. */
#pen-ghost {
  position: fixed;
  left: 0;
  top: -13px;
  z-index: 3;
  width: 190px;
  height: 26px;
  margin: 0;
  color: #000;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 50%;
  filter: blur(1.1px);
  transition: opacity .14s;
  will-change: transform;
}
#pen-ghost[data-dark="1"] { color: #fff; }
body:not(.editing) #pen-ghost { display: none; }

/* A flyout of settings: a row each, its name and its choice. */
.flyout.settings { flex-direction: column; align-items: stretch; gap: 2px; width: 340px; padding: 8px 12px; }
.set-row span { white-space: nowrap; }
.set-head { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
body:not(.can-record) .app-only { display: none; }
#settings-wrap .flyout { left: auto; right: -6px; --at: translate(0); transform-origin: 100% 0; }
/* In the rail the button is near the foot of the screen: the flyout rises from it instead of being centred on it. */
body.full #toolbar #settings-wrap .flyout { top: auto; bottom: 0; right: calc(100% + 12px); --at: translate(0); transform-origin: 100% 100%; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; }
.set-row select {
  height: 36px;
  max-width: 172px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none; /* the device's own picker still opens; only the closed look is ours */
  background: var(--fill);
  color: inherit;
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
}

/* The name gives way before the tools do. */
#note-name { width: clamp(90px, 15vw, 190px); }

/* "Paste picture", which a long press with a finger brings up where the finger is (app.js). */
#paste-pill { position: fixed; z-index: 8; padding: 0 22px; white-space: nowrap; color: var(--accent); user-select: none; -webkit-user-select: none; }

/* ---------- The calculator (calc.js) ---------- */

/* Placed by calc.js with left and top (no transform: see the notes on the iPad), over the note and its toolbar. */
#calc {
  position: absolute;
  z-index: 6;
  width: min(424px, calc(100% - 12px));
  padding: 8px 12px 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--sheen), transparent 40%), var(--glass-thick);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--rim), 0 2px 4px rgb(20 25 40 / .08), 0 24px 60px rgb(20 25 40 / .28);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* a finger on it never scrolls or zooms the note */
  --key: rgb(255 255 255 / .78);
  --key-fn: rgb(110 120 145 / .16);
}
:root[data-theme="dark"] #calc { --key: rgb(255 255 255 / .13); --key-fn: rgb(255 255 255 / .07); box-shadow: var(--rim), 0 24px 60px rgb(0 0 0 / .6); }

.calc-head { display: flex; align-items: center; gap: 6px; height: 36px; }
.calc-hb { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--muted); }
.calc-hb .icon { width: 15px; height: 15px; }
/* The dash becomes a plus: its upright stroke grows out of the middle. */
.calc-hb .v { transform-box: fill-box; transform-origin: center; transform: scaleY(0); opacity: 0; transition: transform .45s cubic-bezier(.32, .72, 0, 1), opacity .25s ease; }
#calc.min .calc-hb .v { transform: scaleY(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .calc-hb .v { transition: none; } }
/* The handle: wide enough to catch a finger, with a bar to show it is one; when shrunk, the last answer beside it. */
#calc-grip { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 36px; min-width: 0; touch-action: none; cursor: grab; }
#calc-grip .bar { flex: none; width: 44px; height: 5px; border-radius: 3px; background: var(--border); }
#calc-mini { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
#calc.min { width: 230px; padding-bottom: 8px; }
#calc.min #calc-mini { display: block; }
#calc.min #calc-grip .bar { display: none; }
#calc.min #calc-disp, #calc.min #calc-keys { display: none; }
/* While the pane moves between its sizes, its body stays (faded by calc.js) and what does not fit is cut off. */
#calc.morphing { overflow: hidden; }
#calc.min.morphing #calc-disp { display: flex; }
#calc.min.morphing #calc-keys { display: grid; }

/* The screen: the sum above, the answer below. While a sum is being typed, it is the large line. */
#calc-disp { display: flex; flex-direction: column; justify-content: flex-end; height: 126px; margin-top: 4px; padding: 8px 14px 10px; border-radius: 16px; background: rgb(110 120 145 / .12); box-shadow: inset 0 1px 3px rgb(20 25 40 / .1); text-align: right; font-variant-numeric: tabular-nums; }
#calc-ex { position: relative; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; font-size: 19px; line-height: 1.5; color: var(--muted); }
#calc-ex::-webkit-scrollbar { display: none; }
#calc-disp.typing #calc-ex { font-size: 26px; color: var(--text); }
#calc-re { min-height: 46px; font-size: 40px; font-weight: 600; line-height: 46px; letter-spacing: -.02em; white-space: nowrap; }
#calc-disp.typing #calc-re { min-height: 0; height: 0; opacity: 0; }
#calc-disp.typing.blank #calc-re { min-height: 46px; height: auto; opacity: 1; } /* nothing typed: a 0 */
#calc-disp.bad #calc-re { font-size: 26px; color: var(--danger); }
#calc-disp sup { font-size: .62em; line-height: 0; }
/* A fraction written as in a book: the top over a bar over the bottom. */
#calc-disp .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .12em; font-size: .78em; line-height: 1.1; }
#calc-disp .frac > span:first-child { padding: 0 .15em .06em; border-bottom: .08em solid currentColor; }
#calc-disp .frac > span:last-child { padding: .06em .15em 0; }
#calc-re .frac { font-size: .8em; }

#calc-keys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.k { display: grid; place-items: center; height: 44px; padding: 0; border: 0; border-radius: 13px; font-size: 16px; font-weight: 500; background: var(--key); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 1px 2px rgb(20 25 40 / .14), 0 0 0 1px rgb(120 128 150 / .16); }
.k.fn { background: var(--key-fn); font-size: 14px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 0 1px rgb(120 128 150 / .12); }
.k.op { background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 600; }
.k.eq { background: var(--accent); color: #fff; font-size: 20px; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 6px 14px rgb(47 111 237 / .35); }
.k.clr { color: var(--danger); }
.k.tog { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.k.tog.on { background: var(--accent); color: #fff; }
.k.wide { grid-column: span 2; }
.k sup { font-size: .65em; line-height: 0; }
.k .frac { display: inline-flex; flex-direction: column; align-items: center; font-size: 9px; line-height: 1; }
.k .frac > span:first-child { padding-bottom: 1px; border-bottom: 1px solid currentColor; }
.k .frac > span:last-child { padding-top: 1px; }
@media (hover: hover) { .k:hover { filter: brightness(1.05); } }
.k > span { display: inline-flex; align-items: center; gap: 1px; }
/* What is still to be typed in a fraction: an empty box, drawn here (a font may have no such sign). */
.box { display: inline-block; width: .5em; height: .72em; border: 1.5px solid currentColor; border-radius: 2px; opacity: .55; vertical-align: -.05em; }
.k .box { width: 6px; height: 8px; border-width: 1px; }

/* ---------- Open notes: the tabs (tabs.js) ---------- */

/* A glass strip under the toolbar (app.js puts its top there). Its tabs shrink, their names cut with …, rather than the strip growing. */
#note-tabs {
  position: absolute;
  left: 12px;
  top: 64px;
  z-index: 4;
  flex-wrap: nowrap;
  gap: 3px;
  max-width: calc(100% - 96px); /* room at the right for the toolbar's arrow */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#note-tab-list { display: flex; gap: 3px; min-width: 0; }
.note-tab { display: flex; align-items: center; flex: 0 1 auto; width: 190px; min-width: 84px; height: 36px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); }
.note-tab.on { background: rgb(255 255 255 / .95); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgb(20 25 40 / .16), 0 0 0 1px rgb(120 128 150 / .16); }
:root[data-theme="dark"] .note-tab.on { background: rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 0 0 1px rgb(255 255 255 / .08); }
.note-tab-open { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 36px; padding: 0 2px 0 13px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; text-align: left; }
.note-tab-open .icon { flex: none; width: 16px; height: 16px; }
.note-tab-open span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-tab-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-right: 1px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; }
.note-tab-x .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.note-tab.on .note-tab-x { color: var(--muted); }
.note-tab-rec { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e03131; }
#tab-add-wrap { flex: none; }
#tab-add-wrap .flyout { top: calc(100% + 8px); left: 0; --at: translate(0); transform-origin: 0 0; max-width: min(320px, 80vw); }
#tab-add-wrap .flyout.flip { left: auto; right: 0; transform-origin: 100% 0; } /* the + is far along: the menu opens towards the left */
#tab-menu .btn-secondary { overflow: hidden; text-overflow: ellipsis; }
#tab-menu .btn-secondary.all { color: var(--accent); }
/* Not in what is recorded: the 16:9 window, the full-screen rail, or with the tools put away. */
body.wide #note-tabs, body.full #note-tabs, body.tools-off #note-tabs { display: none; }
/* With the tabs under the toolbar the arrow is at its right end, not in the middle, where the tabs would pass beneath it. */
body:not(.full):not(.wide) #tools-toggle { left: auto; right: 12px; }
@media (hover: hover) {
  .note-tab:not(.on):hover { background: var(--fill); }
  .note-tab-x:hover { background: var(--fill); }
}
.k.span3 { grid-column: span 3; }
/* The cursor: a bar that blinks, in the sum, inside a fraction or a power when that is where the next digit goes. */
.caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 1px; border-radius: 1px; background: var(--accent); vertical-align: middle; animation: caret-blink 1.05s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* Test hook only (app.js, runProbe): the layers without their compositing hints, to compare how ink is drawn. */
body.nowc #mover, body.nowc #ink, body.nowc #page { will-change: auto; }

/* ---------- Recordings: choosing several, and Recently deleted (app.js) ---------- */

#vid-tools { display: none; align-items: center; gap: 6px; }
body.in-videos #vid-tools { display: flex; }
body.in-bin #vid-select, body:not(.in-bin) #vid-empty, body.in-bin #vid-bin { display: none; }
#vid-bin { position: relative; }
#vid-bin-count { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; }
#vid-bin-count:empty { display: none; }
.btn-secondary.danger { color: var(--danger); }
/* The bar floats at the foot of the library while recordings are being chosen. */
#vid-bar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 8px; width: -webkit-fit-content; width: fit-content; max-width: calc(100% - 24px); margin: 8px auto 16px; padding: 6px 8px 6px 18px; border-radius: 999px; background: var(--glass-thick); -webkit-backdrop-filter: blur(var(--blur, 20px)); backdrop-filter: blur(var(--blur, 20px)); box-shadow: 0 6px 24px rgb(0 0 0 / .22), inset 0 0 0 1px var(--border); }
#vid-bar[hidden] { display: none; }
#vid-count { margin-right: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
#vid-bar .btn-secondary { height: 38px; padding: 0 14px; background: var(--fill); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
#vid-bar .btn-secondary:disabled { opacity: .4; }
body:not(.in-bin) #vid-restore, body.in-bin #vid-share { display: none; }
/* A chosen recording: outlined, with a tick; while choosing, the others have an empty ring. */
body.selecting .card.video .card-more { display: none; }
body.selecting .card.video .card-thumb::after { content: ''; position: absolute; top: 8px; left: 8px; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgb(0 0 0 / .25); box-shadow: 0 1px 4px rgb(0 0 0 / .35); pointer-events: none; }
.card.video.picked .card-thumb { box-shadow: inset 0 0 0 3px var(--accent); }
body.selecting .card.video.picked .card-thumb::after { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat; }