/*
 * ink.css — the written view: the instrument tray, the sheet of paper with
 * its ruling, the canvases on it, the flags in its margin and the selection.
 * Colors come from tokens.css only. Sizes that follow the zoom of the sheet
 * are custom properties set by js/ink.js on .nb-ink-sheet:
 *   --nb-ink-zoom    CSS px per page unit
 *   --nb-ink-pitch   distance between two rules
 *   --nb-ink-top     y of the first rule
 *   --nb-ink-margin  x of the margin rule
 */

/* --------------------------- instrument tray ----------------------- */
.nb-ink-tray {
  display: flex; align-items: center;
  min-height: 54px; min-width: 0;
  padding: 5px 12px;
  background: var(--chrome);
}
/* everything but undo and redo scrolls sideways when the screen is narrow */
.nb-ink-tray__scroll {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.nb-ink-tray__scroll::-webkit-scrollbar { display: none; }
.nb-ink-tray__grp { display: flex; align-items: center; flex: none; }
.nb-ink-tray__end {
  display: flex; align-items: center; flex: none;
  margin-left: auto; padding-left: 8px;
}
.nb-ink-tray.is-clipped .nb-ink-tray__end { box-shadow: -1px 0 0 var(--hairline-strong); margin-left: 4px; }
/* more tools lie to the right: the row fades out until it is scrolled to its end (the mask is alpha only, not a color) */
.nb-ink-tray.is-clipped:not(.is-at-end) .nb-ink-tray__scroll {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* closer together, so that an iPad held upright (820 px) shows the whole tray */
.nb-ink-tray.is-tight { padding-inline: 8px; }
.nb-ink-tray.is-tight .nb-vr { margin-inline: 5px; }
.nb-ink-tray.is-tight .nb-ink-nib { width: 48px; }
.nb-ink-tray.is-tight .nb-ink-tray__end { padding-left: 4px; }
/* the scrolling part would cut off a focus ring that stands out */
.nb-ink-tray :focus-visible { outline-offset: -2px; }
.nb-ink-tray .nb-swatch[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--text); }
.nb-ink-tray .nb-swatch:hover { background: var(--hover); }

.nb-ink-nib {
  width: 52px; height: var(--tap);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0; border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--text-2);
  font: 400 10px/1 var(--font-util); font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: none;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.nb-ink-nib:hover { background: var(--hover); color: var(--text); }
.nb-ink-nib[aria-checked="true"] { background: var(--accent-wash); color: var(--text); }
.nb-ink-nib__line { display: block; width: 28px; height: 12px; }
.nb-ink-nib svg { display: block; width: 28px; height: 12px; overflow: visible; }

.nb-ink-opt {
  min-height: var(--tap); padding: 0 8px 0 12px;
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--text);
  font: 500 var(--fs-body)/1 var(--font-body);
  white-space: nowrap; flex: none;
  touch-action: manipulation;
}
.nb-ink-opt:hover { background: var(--hover); }
.nb-ink-opt .nb-icon { color: var(--text-2); }
.nb-ink-tray__hint { padding-inline: 8px; color: var(--text-3); font-size: var(--fs-small); white-space: nowrap; }

/* the pens that did not fit the tray */
.nb-ink-pop { display: flex; align-items: center; padding: 6px; }

/* ------------------------------- paper ----------------------------- */
.nb-ink-host {
  overflow-x: hidden; overflow-y: auto;
  scrollbar-gutter: stable;      /* a page that grows must not change the width of the sheet */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--desk);
}
.nb-ink-well {
  box-sizing: border-box; min-height: 100%;
  padding: 28px 32px 48px;
  background: var(--desk);
}
.nb-ink-host.is-narrow .nb-ink-well { padding: 10px 8px 28px; }

.nb-ink-sheet {
  --nb-ink-zoom: 1;
  --nb-ink-pitch: 36px;
  --nb-ink-top: 108px;
  --nb-ink-margin: 112px;
  position: relative;
  isolation: isolate;          /* the layers below are ordered among themselves only */
  margin-inline: auto;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: var(--shadow-paper);
  cursor: crosshair;
  /* fingers scroll, the Pencil draws: js/ink.js keeps stylus touches from scrolling */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* fingers draw (or scrolling is done by hand): the browser keeps its gestures to itself */
.nb-ink-sheet[data-fingers="draw"],
.nb-ink-sheet[data-fingers="manual"] { touch-action: none; }
.nb-ink-sheet[data-tool="lasso"] { cursor: default; }

/* the ruling: the first rule lies at --nb-ink-top, the writing sits on the rules */
.nb-ink-sheet::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--nb-ink-top) - var(--nb-ink-pitch));
  border-radius: 0 0 3px 3px;
  pointer-events: none;
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--feint) calc(100% - 1px));
  background-size: 100% var(--nb-ink-pitch);
  background-position: 0 0;
}
.nb-ink-sheet::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: var(--nb-ink-margin); width: 1.5px;
  background: var(--margin-rule);
  pointer-events: none;
}
.nb-ink-sheet[data-paper="grid"]::before {
  top: calc(var(--nb-ink-top) - var(--nb-ink-pitch) - 1px);
  border-top: 1px solid var(--feint);
  border-radius: 0;
  background-image:
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--feint) calc(100% - 1px)),
    linear-gradient(to right, transparent calc(100% - 1px), var(--feint) calc(100% - 1px));
  background-size: 100% var(--nb-ink-pitch), var(--nb-ink-pitch) 100%;
  /* a line of the grid falls on the margin */
  background-position: 0 0, calc(var(--nb-ink-margin) - var(--nb-ink-pitch)) 0;
}
.nb-ink-sheet[data-paper="dots"]::before {
  background-image: radial-gradient(circle at calc(100% - 1.5px) calc(100% - 1.5px), var(--hairline-strong) 1.2px, transparent 1.7px);
  background-size: var(--nb-ink-pitch) var(--nb-ink-pitch);
  background-position: calc(var(--nb-ink-margin) - var(--nb-ink-pitch) + 1px) 1px;
}
.nb-ink-sheet[data-paper="plain"]::before { background-image: none; }
.nb-ink-sheet[data-paper="dots"]::after,
.nb-ink-sheet[data-paper="plain"]::after { display: none; }

/* Layers of the sheet, from the paper up: title, ink, stroke in progress,
   flags, selection. The ruling lies under all of them. */

/* the title of the note, above the first row and right of the margin */
.nb-ink-head {
  position: absolute; top: 0; z-index: 1;
  left: calc(var(--nb-ink-margin) + 16px * var(--nb-ink-zoom));
  right: calc(24px * var(--nb-ink-zoom));
  /* min, not height: on a phone the title keeps 16px and may take a few pixels of the first row */
  min-height: calc(var(--nb-ink-top) - var(--nb-ink-pitch));
  padding-bottom: calc(7px * var(--nb-ink-zoom));
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.nb-ink-head .nb-sheethead__title { cursor: text; -webkit-user-select: text; user-select: text; }

.nb-ink-tiles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.nb-ink-tile { position: absolute; left: 0; display: block; pointer-events: none; }
.nb-ink-live { position: absolute; left: 0; top: 0; z-index: 3; display: block; pointer-events: none; }

/* -------------------------- flags in the margin -------------------- */
.nb-ink-flags {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 4;
  width: var(--nb-ink-margin);
  pointer-events: none;
}
/* --nb-flag-shift (set by js/ink.js) moves the flags of one line apart, side by side */
.nb-ink-flags .nb-flag {
  position: absolute; right: 8px;
  max-width: 100%;
  transform: translate(calc(-1 * var(--nb-flag-shift, 0px)), -50%);
  pointer-events: auto;
  cursor: pointer;
}
.nb-ink-flags .nb-flag--compact { right: 50%; transform: translate(calc(50% - var(--nb-flag-shift, 0px)), -50%); }

/* ------------------------------ selection -------------------------- */
.nb-ink-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.nb-ink-frame {
  position: absolute;
  border: 1.5px dashed var(--accent); border-radius: 6px;
  background: var(--band);
  pointer-events: none;
}
/* the knob is small; what takes the finger is not */
.nb-ink-handle {
  position: absolute;
  width: var(--tap); height: var(--tap);
  margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2);
  padding: 0; border: 0; border-radius: 50%;
  background: transparent;
  display: grid; place-items: center;
  pointer-events: auto;
  touch-action: none;
  cursor: nwse-resize;
}
.nb-ink-handle::before {
  content: "";
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--raised);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-thumb);
}
.nb-ink-handle:focus-visible { outline-offset: -8px; }

.nb-ink-bar {
  position: absolute;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: var(--raised);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
}
.nb-ink-bar__main, .nb-ink-bar__opt {
  min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: var(--r-m);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.nb-ink-bar__main {
  padding-inline: 12px 16px;
  background: var(--ink); color: var(--on-ink);
  font: 600 var(--fs-body)/1 var(--font-body);
}
.nb-ink-bar__main:hover { opacity: 0.9; }
.nb-ink-bar__opt {
  padding-inline: 10px;
  background: transparent; color: var(--text);
  font: 500 var(--fs-small)/1 var(--font-util);
}
.nb-ink-bar__opt:hover { background: var(--hover); }
.nb-ink-bar.is-busy { cursor: progress; }
.nb-ink-bar.is-busy > * { pointer-events: none; opacity: 0.6; }
/* while the selection is carried the bar is in the way */
.nb-ink-ui.is-moving .nb-ink-bar { visibility: hidden; }