/* Margin — the notebook app's own layer.

   Sits on top of nocturne.css (the vendored design system) and theme.css (the
   night/paper + accent tokens). Everything here is Margin-specific: the
   toolbar, the paper, the palettes and the side panel.

   Transcribed from Margin.dc.html, whose styles are inline. Where the design
   pinned a pixel value it is kept; where it used a token, the token is kept. */

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

#app {
  height: 100vh;
  height: 100dvh;          /* iPad Safari: shrink with the address bar, not under it */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);

  /* On a touch screen a long press over the page would otherwise start a text
     selection or pop the callout menu mid-stroke. Selection is handed back
     only where it is actually wanted, below. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.tx, .input, .search-input { -webkit-user-select: text; user-select: text; }

/* ── touch ────────────────────────────────────────────────────────────── */

/* The design is drawn for a mouse. On glass, a 32px control is too small to
   hit reliably, so the toolbar grows a little where the pointer is coarse.
   Nothing moves on a desktop. */
@media (pointer: coarse) {
  .toolbar { height: 54px; }
  .tbtn { min-width: 42px; height: 40px; }
  .nib-btn { height: 40px; }
  .ink-dot { width: 22px; height: 22px; }
  .ink-row { gap: 8px; }
  .cover-star { min-width: 34px; height: 34px; font-size: 16px; }
  .rail-add, .play-btn { height: 38px; }
  /* iOS zooms the whole page when a focused field is under 16px. */
  .search-input, .input { font-size: 16px; }
}

/* Both scrolling regions get the same thin, unobtrusive bar. */
.scrolly, .rail { scrollbar-width: thin; scrollbar-color: var(--color-neutral-800) transparent; }
.scrolly::-webkit-scrollbar, .rail::-webkit-scrollbar { width: 7px; height: 7px; }
.scrolly::-webkit-scrollbar-thumb, .rail::-webkit-scrollbar-thumb {
  background: var(--color-neutral-800); border-radius: 8px;
}
.scrolly::-webkit-scrollbar-track, .rail::-webkit-scrollbar-track { background: transparent; }

/* The toolbar button: small, quiet, and only coloured when it is the active
   tool. Shared by every icon control in the top bar and the toolbar. */
.tbtn {
  min-width: 34px; height: 32px; padding: 0 6px;
  font-size: 13px; color: var(--color-neutral-400);
  border-radius: var(--radius-sm);
}
.tbtn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-text); }
.tbtn.is-active { color: var(--color-accent-200); background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.tbtn.is-on { color: var(--color-accent-200); }

/* ── top bar ──────────────────────────────────────────────────────────── */

.topbar {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.topbar-mark { width: 9px; height: 9px; border-radius: 2px; background: var(--color-accent); flex: none; }
.topbar-name {
  font-family: var(--font-heading); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-500); flex: none;
}
.topbar-apps { display: flex; align-items: center; gap: 10px; padding-left: 6px; min-width: 0; overflow: hidden; }
.topbar-app {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--color-neutral-500); white-space: nowrap;
}
.topbar-app:hover { color: var(--color-accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.topbar-right .tbtn { font-size: 12px; padding: 0 10px; }
.seg-sm { transform: scale(0.82); transform-origin: right center; }

/* ── library ──────────────────────────────────────────────────────────── */

.library { flex: 1; min-height: 0; overflow-y: auto; }
.library-inner {
  max-width: 1060px; margin: 0 auto; padding: 34px 32px 60px;
  display: flex; flex-direction: column; gap: 24px;
}
.library-head { display: flex; align-items: flex-end; gap: 20px; }
.library-head h1 { margin: 0; font-size: 34px; }
.library-actions { margin-left: auto; display: flex; gap: 8px; }
.library-actions .btn { font-size: 12px; }
.library-tabs { display: flex; align-items: center; gap: 14px; }
.library-count { margin-left: auto; font-size: 12px; color: var(--color-neutral-600); }

.library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .library-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .library-grid { grid-template-columns: repeat(2, 1fr); } }

.book { cursor: pointer; display: flex; flex-direction: column; gap: 9px; }
.book:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-md); }
.cover {
  position: relative; aspect-ratio: 10 / 7;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The spine: a single accent bar down the binding edge, the one mark that
   says "notebook" rather than "thumbnail". */
.cover-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-accent-700); }
.cover-star {
  position: absolute; right: 4px; top: 4px;
  min-width: 26px; height: 26px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1; color: var(--color-neutral-600);
}
.cover-star.is-on { color: var(--color-accent); }
.cover-pdf {
  position: absolute; left: 12px; bottom: 8px;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.book-title { font-family: var(--font-heading); font-size: 14px; line-height: 1.35; text-wrap: pretty; }
.book-meta { display: flex; gap: 7px; font-size: 11px; color: var(--color-neutral-600); }
.book-shared { color: var(--color-accent-400); }

/* ── notebook ─────────────────────────────────────────────────────────── */

.book-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.toolbar {
  flex: none; display: flex; align-items: center; gap: 3px;
  height: 46px; padding: 0 10px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
  /* Below the design's 1194px the toolbar runs out of room. It scrolls rather
     than clipping, so Share and Record stay reachable on a small window. */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { height: 0; display: none; }
.toolbar > * { flex-shrink: 0; }
.toolbar-title {
  font-family: var(--font-heading); font-size: 13px; padding: 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px;
}
.toolbar-tools { display: flex; gap: 3px; }
.tsep { width: 1px; height: 20px; background: var(--color-divider); margin: 0 6px; flex: none; }

.nib-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px; border-radius: var(--radius-sm);
}
.nib-btn.is-on { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.nib-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--color-divider); }
.nib-label { font-size: 11px; color: var(--color-neutral-400); white-space: nowrap; }

.ink-row { display: flex; gap: 5px; padding: 0 8px; }
.ink-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--color-divider);
}
.ink-dot.is-on { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-text); }

.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.scribble-hint {
  font-size: 11px; color: var(--color-neutral-600); padding-right: 4px;
  white-space: nowrap; flex: none; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.rec-btn { padding: 0 10px; font-size: 11px; }
.rec-btn.is-rec {
  color: oklch(0.72 0.15 25);
  background: color-mix(in srgb, oklch(0.72 0.15 25) 16%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rec-btn.is-rec { animation: none; } }

.toolbar-right .btn-secondary { font-size: 12px; height: 30px; }

.book-body { flex: 1; min-height: 0; display: flex; }

/* ── page rail ────────────────────────────────────────────────────────── */

.rail {
  width: 132px; flex: none; overflow-y: auto;
  border-right: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-surface) 55%, var(--color-bg));
  padding: 12px 10px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.rail-item { cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.rail-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }
.rail-frame {
  position: relative; aspect-ratio: 10 / 7;
  border-radius: 5px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.rail-frame.is-current { box-shadow: 0 0 0 2px var(--color-accent); }
.rail-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rail-label { font-size: 10px; color: var(--color-neutral-600); text-align: center; }
.rail-add { font-size: 11px; height: 30px; flex: none; }

/* ── the page ─────────────────────────────────────────────────────────── */

.stage {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px; gap: 10px; position: relative;
}
/* Fit a 10:7 page inside whatever space is left, letterboxed on the axis that
   runs out first.

   aspect-ratio alone cannot do this: the moment both width and height are
   constrained it is ignored, and the page comes out square. So .page-fit is a
   size container and the page takes the smaller of the two fits — the exact
   same min() on both axes, which is always in ratio and never overflows. */
.page-fit {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: grid; place-items: center;
  container-type: size;
}
.page-wrap {
  position: relative;
  width:  min(100cqw, 100cqh * 10 / 7);
  height: min(100cqh, 100cqw * 7 / 10);
}

.paper {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* so typed text can size against the page rather than the window */
  container-type: inline-size;
}

/* The three layers on a page, bottom to top: imported PDF, ink, then the
   things you place on top of ink — typed boxes and link chips. */
.pdf {
  position: absolute; inset: 0; padding: 46px 58px;
  font-size: 12.5px; line-height: 1.7; color: #2a2c34;
  font-family: var(--font-body); overflow: hidden; z-index: 1;
}
.ink {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; touch-action: none;
}
/* Anything sitting ON the page takes its colour from the PAPER STOCK, never
   from the app's theme. A midnight page stays a midnight page when the
   interface around it switches to Paper, so its text must stay light or it
   turns dark-on-dark and disappears. */
.tx {
  position: absolute; z-index: 3;
  min-width: 120px; padding: 2px 4px; border-radius: 3px;
  font-family: var(--font-heading); color: #e9e9ed;
  outline: none;
}
.tx.on-light { color: #24262e; }
.tx:focus { box-shadow: 0 0 0 1px var(--color-accent-700); }

.chip {
  position: absolute; z-index: 4;
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 9px; border-radius: var(--radius-sm);
  text-decoration: none; font-size: 11.5px;
  background: color-mix(in srgb, var(--color-accent) 20%, #14161f);
  color: #e9e9ed; box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.chip.on-light { background: rgba(20, 22, 31, 0.92); }
/* The chip's ground is dark on every stock and in every theme, so its label
   keeps the accent HUE but pins the light end of the ramp rather than reading
   the theme's accent-300 — which goes dark under Paper. */
.chip-app {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.87 calc(var(--accent-c) * 0.58) var(--accent-h));
}
/* In the side panel the chip label sits on the app's own surface, so there it
   should follow the theme normally. */
.panel-link .chip-app { color: var(--color-accent-400); }

.page-nav {
  flex: none; display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--color-neutral-600);
}

/* ── palettes ─────────────────────────────────────────────────────────── */

.palette {
  position: absolute; z-index: 40;
  padding: 14px; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 14px;
}
.palette-pen { left: 50%; top: 6px; transform: translateX(-50%); width: 320px; }
.palette-paper { right: 14px; top: 6px; width: 250px; gap: 13px; }
.palette-group { display: flex; flex-direction: column; gap: 8px; }
.palette-row { display: flex; align-items: center; gap: 8px; }
.palette-label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.palette-value { margin-left: auto; font-size: 11px; color: var(--color-neutral-500); }
.palette-note { font-size: 11px; color: var(--color-neutral-600); text-wrap: pretty; }

.nib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nib-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--color-bg); color: inherit; font: inherit; font-size: 11px;
}
.nib-opt.is-on { background: color-mix(in srgb, var(--color-accent) 17%, transparent); }
.nib-sample { width: 34px; border-radius: 4px; }
/* Each nib advertises itself: the fountain tapers, the highlighter is fat and
   translucent, the pencil is grey, the ballpoint is a hairline. */
.nib-sample--fountain { height: 3px; clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); }
.nib-sample--ball { height: 2px; }
.nib-sample--pencil { height: 2px; opacity: 0.6; }
.nib-sample--marker { height: 9px; opacity: 0.4; }

.size-range { width: 100%; accent-color: var(--color-accent); }
.size-dots { display: flex; align-items: center; gap: 10px; height: 22px; }
.size-dot { border: 0; padding: 0; border-radius: 50%; cursor: pointer; opacity: 0.4; }
.size-dot.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-accent); }

.pigment-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pigment {
  width: 26px; height: 26px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--color-divider);
}
.pigment.is-on { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-text); }

/* — switch — */

.switch { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.sw-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.switch-track {
  position: relative; flex: none; width: 34px; height: 20px; margin-top: 1px;
  border-radius: 999px; background: var(--color-neutral-800);
  transition: background 120ms ease;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-neutral-500);
  transition: transform 120ms ease, background 120ms ease;
}
.sw-input:checked + .switch-track { background: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.sw-input:checked + .switch-track .switch-knob { transform: translateX(14px); background: var(--color-accent-200); }
.sw-input:focus-visible + .switch-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.switch-note { font-size: 11px; color: var(--color-neutral-600); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-knob { transition: none; }
}

.ruling-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ruling-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 3px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--color-bg); color: inherit; font: inherit; font-size: 10px;
}
.ruling-opt.is-on { background: color-mix(in srgb, var(--color-accent) 17%, transparent); }
.ruling-swatch { width: 100%; height: 30px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--color-divider); }

.stock-row { display: flex; gap: 8px; }
.stock {
  width: 30px; height: 30px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--color-divider);
}
.stock.is-on { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-accent); }

/* ── link picker ──────────────────────────────────────────────────────── */

.link-picker {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 45; width: 360px; padding: 0; gap: 0; overflow: hidden;
}
.link-head {
  padding: 12px 14px; border-bottom: 1px solid var(--color-divider);
  font-size: 12px; color: var(--color-neutral-400);
}
.link-list { max-height: 300px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; }
.link-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: none; color: inherit; font: inherit; font-size: 13px; text-align: left;
}
.link-opt:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.link-app {
  width: 62px; flex: none;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-400);
}
.link-foot { padding: 10px 14px; display: flex; justify-content: flex-end; }

/* ── side panel ───────────────────────────────────────────────────────── */

.side {
  width: 246px; flex: none; overflow-y: auto;
  border-left: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-surface) 55%, var(--color-bg));
  padding: 16px 16px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.panel-block { display: flex; flex-direction: column; gap: 10px; }
.panel-row { display: flex; align-items: center; gap: 8px; }
.panel-label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.panel-note { font-size: 11px; color: var(--color-neutral-500); text-wrap: pretty; }
.panel-rec { font-size: 12px; line-height: 1.6; color: var(--color-neutral-500); text-wrap: pretty; }
.audio-clock { margin-left: auto; font-size: 11px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

.wave { position: relative; height: 46px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.wave-bar { flex: 1; border-radius: 2px; background: var(--color-neutral-800); }
.wave-bar.is-passed { background: var(--color-accent); }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-accent-200); pointer-events: none; }
.play-btn { font-size: 12px; height: 30px; min-width: 68px; flex: none; }

.panel-links { display: flex; flex-direction: column; gap: 6px; }
.panel-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--color-surface); text-decoration: none; color: inherit; font-size: 12.5px;
}
.panel-link:hover { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); }

/* ── search ───────────────────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0; z-index: 70;
  background: color-mix(in srgb, #0c0d16 62%, transparent);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 11vh;
}
.search {
  width: min(640px, 92vw); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.search-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-bottom: 1px solid var(--color-divider);
}
.search-icon { color: var(--color-accent); font-size: 15px; }
.search-input {
  flex: 1; background: transparent; border: 0; outline: none;
  font: inherit; font-size: 15px; color: var(--color-text); caret-color: var(--color-accent);
}
.search-esc { font-size: 11px; color: var(--color-neutral-600); }
.search-results { max-height: 52vh; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; }
.hit {
  display: flex; gap: 12px; padding: 10px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: none; color: inherit; font: inherit; text-align: left;
}
.hit:hover { background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.hit-frame { position: relative; width: 76px; height: 53px; flex: none; border-radius: 4px; overflow: hidden; }
.hit-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hit-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hit-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--font-heading); }
.hit-kind {
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent-300); white-space: nowrap;
}
.hit-snippet {
  font-size: 12px; color: var(--color-neutral-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-empty { padding: 18px 12px; font-size: 13px; color: var(--color-neutral-600); }

/* ── share ────────────────────────────────────────────────────────────── */

.dialog-backdrop { z-index: 72; }
.share-invite { display: flex; gap: 8px; }
.share-invite .btn { white-space: nowrap; }
.share-people { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.person { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.person-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--color-accent-800); color: var(--color-accent-200);
  font-size: 11px; display: grid; place-items: center;
}
.person-id { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-size: 13px; }
.person-email { font-size: 11px; color: var(--color-neutral-600); }
.person-role { margin-left: auto; font-size: 12px; color: var(--color-neutral-400); }

/* ── narrow windows ───────────────────────────────────────────────────── */

/* The design is drawn at 1194×834 — an iPad in landscape. Held in PORTRAIT the
   same iPad is 834px wide, so the columns go one at a time rather than both at
   once: the side panel first, keeping the page rail. That leaves the page about
   700px instead of about 460px. Below 700px the rail goes too. */
@media (max-width: 1000px) {
  .side { display: none; }
  .topbar-apps { display: none; }
}
@media (max-width: 700px) {
  .rail { display: none; }
}

/* — sync chip — */

.sync-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--color-divider); background: transparent;
  cursor: pointer; font: inherit; font-size: 11px; color: var(--color-neutral-500);
  white-space: nowrap; flex: none;
}
.sync-chip:hover { color: var(--color-text); border-color: var(--color-neutral-600); }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-600); flex: none; }
.sync-chip.is-ok .sync-dot { background: var(--color-accent); }
.sync-chip.is-syncing .sync-dot { background: var(--color-accent-400); animation: pulse 1.1s ease-in-out infinite; }
.sync-chip.is-error { color: oklch(0.72 0.15 25); border-color: color-mix(in srgb, oklch(0.72 0.15 25) 45%, transparent); }
.sync-chip.is-error .sync-dot { background: oklch(0.72 0.15 25); }
@media (prefers-reduced-motion: reduce) { .sync-chip.is-syncing .sync-dot { animation: none; } }

.sync-dialog .dialog-body p { margin: 0 0 10px; }
.sync-status {
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--color-bg); font-size: 12px; color: var(--color-neutral-400);
  text-wrap: pretty;
}
.sync-dialog .field { display: flex; flex-direction: column; }

/* — the notebook menu — */

/* The title is editable in place. It should not look like a text field until
   you are actually in it. */
.toolbar-title { outline: none; border-radius: var(--radius-sm); padding: 3px 8px; cursor: text; }
.toolbar-title:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.toolbar-title:focus {
  background: var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-accent);
  max-width: 320px;
}

.menu-scrim { position: fixed; inset: 0; z-index: 60; }
.menu {
  position: absolute; right: 14px; top: 88px; width: 232px;
  padding: 5px; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.menu-item {
  text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--color-text);
  padding: 9px 11px; border-radius: var(--radius-sm);
}
.menu-item:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.menu-item.is-danger { color: oklch(0.72 0.15 25); }
.menu-item.is-danger:hover { background: color-mix(in srgb, oklch(0.72 0.15 25) 15%, transparent); }

/* Destructive confirmation reads as destructive. */
.btn-danger { color: oklch(0.72 0.15 25); border-color: color-mix(in srgb, oklch(0.72 0.15 25) 55%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, oklch(0.72 0.15 25) 15%, transparent); }

@media (pointer: coarse) { .menu-item { padding: 12px 12px; } }