/* ============================================================================
   notes-ink.css — the docked ink toolbar and its surfaces               v2.28.0
   ============================================================================
   Everything scopes to .eos-ntp so the legacy .eos-notes rules can never reach
   it. Derives from the same --ntp-* tokens notes-pro.css declares, so light and
   dark track the theme toggle with no second palette.

   The rule this file exists to undo: the pen tools used to be a floating
   .eos-ntp-palette pinned inside .eos-ntp-edwrap (overflow:hidden), so at the
   Studio panel minimum its top row was clipped out of reach and the rest sat on
   top of the ink at z-index 20. The tools now live in a docked row that sits
   OUTSIDE the writing surface, reduces it rather than covering it, and reuses
   .eos-ntp-tb so the 40px touch-target media query applies for free.
   ==========================================================================*/

/* ------------------------------------------------------------------ surfaces */

.eos-ntp-paper { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eos-ntp-editor { z-index: 1; }

/* The committed layer holds every finished stroke; the live layer holds the
   stroke in progress plus the lasso and selection chrome, so a moving pen never
   forces a repaint of the whole history. */
.eos-ntp-ink { position: absolute; inset: 0; z-index: 5; pointer-events: none; touch-action: pan-y; }
.eos-ntp-ink2 { z-index: 6; }
.eos-ntp.is-draw .eos-ntp-ink2 { pointer-events: auto; cursor: none; touch-action: none; }
.eos-ntp.is-draw .eos-ntp-editor { pointer-events: none; user-select: none; caret-color: transparent; opacity: .74; }
.eos-ntp.is-draw.is-sketch .eos-ntp-editor { opacity: 0; }

/* v2.28.1 — selection is suppressed across the WHOLE panel while drawing, not just
   over the editor. A drag that starts on the canvas will otherwise extend a native
   selection outward into the toolbar, the heading and the page behind it — which is
   what a resting palm produces, and what looks like the note selecting itself. The
   popovers are exempt so the hex field stays usable. */
.eos-ntp.is-draw,
.eos-ntp.is-draw .eos-ntp-inktb,
.eos-ntp.is-draw .eos-ntp-inksub,
.eos-ntp.is-draw .eos-ntp-head,
.eos-ntp.is-draw .eos-ntp-controls,
.eos-ntp.is-draw .eos-ntp-foot {
  -webkit-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.eos-ntp.is-draw .eos-ink-pop,
.eos-ntp.is-draw .eos-ink-pop * { -webkit-user-select: text; user-select: text; }
.eos-ntp.is-draw .eos-ntp-ink,
.eos-ntp.is-draw .eos-ntp-ink2,
.eos-ntp.is-draw .eos-ntp-paper { -webkit-user-drag: none; user-drag: none; }

/* the tool ring — sized to the actual nib, so you can see what the eraser will
   take before you take it */
.eos-ntp-inkring {
  position: absolute; z-index: 7; border-radius: 50%; pointer-events: none; display: none;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--ntp-amber-txt);
}
.eos-ntp-inkring.is-eraser { box-shadow: 0 0 0 1.5px var(--ntp-red), inset 0 0 0 1px rgba(220,38,38,.18); }
.eos-ntp-inkring.is-hover { box-shadow: 0 0 0 1.5px var(--ntp-amber-txt), 0 0 0 4px var(--ntp-amber-glow); }

/* ---------------------------------------------------------------- the strip */

.eos-ntp-inktb, .eos-ntp-inksub { display: none; }
.eos-ntp.is-draw #eos-ntp-tb { display: none; }
.eos-ntp.is-draw .eos-ntp-inktb { display: flex; }
.eos-ntp.is-draw .eos-ntp-inksub { display: flex; }

.eos-ntp-inktb .eos-ntp-tools { display: inline-flex; gap: 2px; background: var(--ntp-soft); border-radius: 12px; padding: 2px; }
.eos-ntp-inktb .grow { flex: 1; }
.eos-ntp-inktb .sep { width: 1px; height: 21px; background: var(--ntp-border); margin: 0 5px; flex: none; }
.eos-ntp-inktb .nm { font-size: 11.5px; font-weight: 600; }
.eos-ntp-inktb button[disabled] { cursor: default; }
.eos-ntp-inktb .eos-ink-penchip .svg,
.eos-ntp-inktb .eos-ink-colchip .svg { width: 12px; height: 12px; opacity: .6; }
.eos-ntp-inktb .eos-ink-colchip { gap: 5px; padding: 0 8px; }
.eos-ntp-inktb .eos-ink-colchip .dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,.45);
}
.eos-ntp-inktb .eos-ink-surf.on { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); }

/* the second row: pens while drawing, shapes while shaping, what you can do to
   a selection while selecting. One place to look, whatever the tool. */
.eos-ntp-inksub {
  align-items: center; gap: 7px; padding: 7px 14px;
  background: var(--ntp-bg); border-bottom: 1px solid var(--ntp-border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.eos-ntp-inksub .eos-ink-chips { display: flex; align-items: center; gap: 5px; flex: none; }
.eos-ntp-inksub .eos-ink-chips.wrap { flex-wrap: wrap; }
.eos-ntp-inksub .chip {
  height: 30px; padding: 0 11px; flex: none; white-space: nowrap;
  border: 1px solid var(--ntp-border); background: transparent; color: var(--ntp-fg2);
  border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.eos-ntp-inksub .chip:hover { color: var(--ntp-fg); border-color: var(--ntp-muted); }
.eos-ntp-inksub .chip.on { background: var(--ntp-amber); border-color: var(--ntp-amber); color: var(--ntp-on-amber); }
.eos-ntp-inksub .chip[disabled] { opacity: .4; cursor: default; }
.eos-ntp-inksub .eos-ink-note { font-size: 11.5px; color: var(--ntp-muted); flex: none; padding-right: 3px; }
.eos-ink-rng { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ntp-muted); font-weight: 600; flex: none; white-space: nowrap; }
.eos-ink-rng input[type="range"] { width: 78px; accent-color: var(--ntp-amber); cursor: pointer; }
.eos-ink-rng.wide { display: flex; width: 100%; margin: 9px 0; }
.eos-ink-rng.wide input[type="range"] { flex: 1; width: auto; }
.eos-ink-rng span { min-width: 26px; text-align: right; color: var(--ntp-fg2); }

/* ---------------------------------------------------------------- popovers */

.eos-ink-pop {
  position: absolute; z-index: 60; display: none; width: 224px;
  background: var(--ntp-bg); border: 1px solid var(--ntp-border);
  border-radius: 14px; padding: 11px; box-shadow: var(--ntp-shadow);
}
.eos-ink-pop.open { display: block; }
.eos-ink-pop h5 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ntp-muted);
}
.eos-ink-pop h5 + h5, .eos-ink-pop .eos-ink-sw + h5, .eos-ink-pop .eos-ink-chips + h5 { margin-top: 11px; }
.eos-ink-pop canvas { display: block; width: 100%; height: 104px; border-radius: 9px; cursor: crosshair; }
.eos-ink-sw { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.eos-ink-sw .sw {
  width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,.4);
}
.eos-ink-sw .sw.on { box-shadow: inset 0 0 0 1px rgba(128,128,128,.4), 0 0 0 2px var(--ntp-bg), 0 0 0 4px var(--ntp-fg); }
.eos-ink-hex {
  width: 100%; height: 32px; margin-top: 9px; padding: 0 9px;
  border: 1px solid var(--ntp-border); background: var(--ntp-soft); color: var(--ntp-fg);
  border-radius: 8px; font: inherit; font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, monospace;
}
.eos-ink-row { display: flex; gap: 7px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.eos-ink-pop .mini {
  height: 30px; padding: 0 11px; border: 1px solid var(--ntp-border); background: transparent;
  color: var(--ntp-fg); border-radius: 8px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.eos-ink-pop .mini:hover { background: var(--ntp-soft); }
.eos-ink-pop .eos-ink-note { display: block; font-size: 11px; line-height: 1.55; color: var(--ntp-muted); margin: 9px 0 0; }

.eos-ink-tgl {
  display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ntp-fg2);
  cursor: pointer; padding: 7px 0; user-select: none;
}
.eos-ink-tgl .tk {
  width: 32px; height: 19px; border-radius: 999px; background: var(--ntp-soft);
  position: relative; flex: none; transition: background .16s;
}
.eos-ink-tgl .tk::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ntp-muted); transition: left .16s, background .16s;
}
.eos-ink-tgl.on .tk { background: var(--ntp-amber); }
.eos-ink-tgl.on .tk::after { left: 15px; background: var(--ntp-on-amber); }

/* layers */
.eos-ink-lay {
  display: flex; align-items: center; gap: 7px; padding: 5px 4px;
  border-radius: 9px; cursor: pointer; font-size: 12px; color: var(--ntp-fg2);
}
.eos-ink-lay:hover { background: var(--ntp-soft); }
.eos-ink-lay.on { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); }
.eos-ink-lay .nm { flex: 1; font-weight: 600; }
.eos-ink-lay .ct { font-size: 10.5px; color: var(--ntp-muted); font-variant-numeric: tabular-nums; }
.eos-ink-lay .ib {
  width: 26px; height: 26px; border: 0; background: none; color: var(--ntp-muted);
  border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.eos-ink-lay .ib:hover { background: var(--ntp-soft); color: var(--ntp-fg); }
.eos-ink-lay .ib .svg { width: 15px; height: 15px; }

/* radial menu — right-click or long-press on the canvas */
.eos-ink-pop.is-radial { width: 140px; height: 140px; border-radius: 50%; padding: 0; }
.eos-ink-pop.is-radial .ra {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 30px; margin: -15px 0 0 -27px;
  border: 1px solid var(--ntp-border); background: var(--ntp-bg); color: var(--ntp-fg);
  border-radius: 999px; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
  transform: rotate(calc(var(--i) * 60deg)) translate(52px) rotate(calc(var(--i) * -60deg));
}
.eos-ink-pop.is-radial .ra:hover { background: var(--ntp-amber); border-color: var(--ntp-amber); color: var(--ntp-on-amber); }

/* command palette */
.eos-ink-pop.is-cmd { width: 320px; padding: 9px; }
.eos-ink-pop.is-cmd input {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--ntp-border);
  background: var(--ntp-soft); color: var(--ntp-fg); border-radius: 9px; font: inherit; font-size: 13px;
}
.eos-ink-pop.is-cmd .ci {
  padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ntp-fg2); cursor: pointer;
}
.eos-ink-pop.is-cmd .ci.on { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); font-weight: 600; }
.eos-ink-pop.is-cmd .ci.is-none { color: var(--ntp-muted); cursor: default; }
.eos-ink-pop.is-cmd #eos-ink-cmdl { margin-top: 6px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }

/* --------------------------------------------------------- paper templates */

.eos-ntp-editor.tpl-grid {
  background-image:
    linear-gradient(to bottom, transparent 23px, var(--ntp-border) 23px, var(--ntp-border) 24px, transparent 24px),
    linear-gradient(to right, transparent 23px, var(--ntp-border) 23px, var(--ntp-border) 24px, transparent 24px);
  background-size: 100% 24px, 24px 100%; background-position: 0 12px, 10px 0; line-height: 24px;
}
.eos-ntp-editor.tpl-eng {
  background-image:
    linear-gradient(to bottom, transparent 9px, var(--ntp-border) 9px, var(--ntp-border) 10px, transparent 10px),
    linear-gradient(to right, transparent 9px, var(--ntp-border) 9px, var(--ntp-border) 10px, transparent 10px);
  background-size: 100% 10px, 10px 100%; background-position: 0 12px, 10px 0; line-height: 30px;
}
.eos-ntp-editor.tpl-wide {
  background-image: linear-gradient(to bottom, transparent 41px, var(--ntp-border) 41px, var(--ntp-border) 42px, transparent 42px);
  background-size: 100% 42px; background-position: 0 12px; line-height: 42px;
}
.eos-ntp-editor.tpl-cornell {
  background-image:
    linear-gradient(to bottom, transparent 31px, var(--ntp-border) 31px, var(--ntp-border) 32px, transparent 32px),
    linear-gradient(to right, transparent 131px, var(--ntp-muted) 131px, var(--ntp-muted) 132px, transparent 132px);
  background-size: 100% 32px, 100% 100%; background-position: 0 12px, 0 0; line-height: 32px; padding-left: 146px;
}
.eos-ntp-editor.tpl-plan {
  background-image:
    linear-gradient(to bottom, transparent 33px, var(--ntp-border) 33px, var(--ntp-border) 34px, transparent 34px),
    linear-gradient(to right, transparent 55px, var(--ntp-muted) 55px, var(--ntp-muted) 56px, transparent 56px);
  background-size: 100% 34px, 100% 100%; background-position: 0 12px, 0 0; line-height: 34px; padding-left: 70px;
}

/* ----------------------------------------------------- ergonomics + a11y */

/* Left-handed: the tool cluster moves to the trailing edge so a right hand
   resting on the panel is not covering the controls it is reaching for. */
.eos-ntp.ink-left .eos-ntp-inktb { flex-direction: row-reverse; }
.eos-ntp.ink-left .eos-ntp-inktb .grow { order: 0; }
.eos-ntp.ink-left .eos-ntp-inksub { flex-direction: row-reverse; }
.eos-ntp.ink-left .eos-ink-pop { direction: ltr; }

.eos-ntp.ink-big .eos-ntp-inktb button { height: 44px; min-width: 44px; }
.eos-ntp.ink-big .eos-ntp-inksub .chip { height: 38px; font-size: 13px; padding: 0 15px; }
.eos-ntp.ink-big .eos-ink-pop { width: 268px; }
.eos-ntp.ink-big .eos-ink-sw .sw { width: 30px; height: 30px; }
.eos-ntp.ink-big .eos-ink-tgl { font-size: 13.5px; padding: 10px 0; }

.eos-ntp.ink-contrast { --ntp-border: currentColor; }
.eos-ntp.ink-contrast .eos-ntp-inksub .chip { border-width: 2px; }
.eos-ntp.ink-contrast .eos-ntp-inktb button.on { outline: 2px solid currentColor; outline-offset: -2px; }
.eos-ntp.ink-contrast .eos-ntp-inkring { box-shadow: 0 0 0 2px currentColor; }

.eos-ntp-inktb button:focus-visible,
.eos-ntp-inksub button:focus-visible,
.eos-ink-pop button:focus-visible,
.eos-ink-pop input:focus-visible { outline: 2px solid var(--ntp-amber); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .eos-ntp-inktb button, .eos-ntp-inksub .chip, .eos-ink-tgl .tk, .eos-ink-tgl .tk::after { transition: none !important; }
}

/* In a short panel the second row is the first thing worth reclaiming, but the
   chips must stay reachable, so they scroll rather than wrap out of sight. */
@media (max-height: 640px) {
  .eos-ntp-inksub { padding-top: 5px; padding-bottom: 5px; }
}
@media (max-width: 420px) {
  .eos-ntp-inktb .eos-ink-penchip .nm { display: none; }
  .eos-ntp-inktb #eos-ink-lname { display: none; }
  .eos-ntp-inktb .eos-ink-surf .nm { display: none; }
  .eos-ink-pop { width: calc(100vw - 32px); max-width: 300px; }
}