/* ===============================================================
   notes.css — the scratchpad drawer on the right edge, and the
   handle that is the only part of it visible while it is closed.

   The drawer is parked between the two fixed bars rather than over
   them: --topbar-h is published by ui/controls.js and follows the
   control drawer opening, --bar-h is the transport.
   =============================================================== */

.notes {
  position: fixed;
  top: var(--topbar-h, 56px);
  right: 0;
  bottom: var(--bar-h);
  z-index: 25;              /* over the board, under the transport */
  display: flex;
  width: var(--notes-w);
  transform: translateX(100%);
  transition: transform var(--t-mid) var(--ease);
}

.notes.is-open { transform: none; }

/* ---------------------------------------------------------------
   Handle — sits outside the panel's left edge, so it rides out with
   the panel and lands flush against the screen edge when closed.
   --------------------------------------------------------------- */
.notes__handle {
  position: absolute;
  left: -28px;
  top: 16px;
  width: 28px;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: rgba(12, 17, 24, 0.94);
  color: var(--muted);
  cursor: pointer;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.notes__handle:hover { color: var(--holo); border-color: var(--holo-line); }

.notes.is-open .notes__handle {
  color: var(--holo);
  border-color: var(--holo-line);
  background: var(--holo-soft);
}

/* Something is written in there — worth knowing while it is shut. */
.notes__handle::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--muted-dim);
  transition: background var(--t-fast), box-shadow var(--t-fast);
}

.notes.has-text .notes__handle::after {
  background: var(--holo);
  box-shadow: 0 0 7px var(--holo-glow);
}

/* ---------------------------------------------------------------
   Panel
   --------------------------------------------------------------- */
.notes__inner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  /* Near-opaque rather than blurred, for the same reason the header
     and the transport are — see topbar.css. This is a taller surface
     than either of them. */
  background: linear-gradient(180deg, rgba(12, 17, 24, 0.97), rgba(8, 11, 16, 0.97));
  box-shadow: -18px 0 44px rgba(5, 7, 10, 0.55);
}

.notes__inner:focus-within { border-left-color: var(--holo-line); }

.notes__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-soft);
}

.notes__title {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.notes__head .icon-btn { width: 26px; height: 26px; }
.notes__head .icon-btn svg { width: 12px; height: 12px; }

.notes__close { color: var(--muted); }
.notes__close:hover { color: var(--danger); border-color: rgba(255, 92, 106, 0.4); }

.notes__area {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  tab-size: 2;
}

.notes__area::placeholder {
  color: var(--muted-dim);
  opacity: 1;
}

/* The panel's own edge already lights up on focus; a ring on top of
   it would sit half outside the drawer. */
.notes__area:focus-visible { outline: 1px solid var(--holo-line); outline-offset: -1px; }

.notes__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   The board makes room instead of being covered — but only where
   there is room to give. Below that the drawer is an overlay.

   padding-right is deliberately not transitioned: animating it
   would relayout the whole grid every frame while the panel slides.
   The panel moves, the board steps aside once.
   --------------------------------------------------------------- */
@media (min-width: 900px) {
  body.notes-open .board { padding-right: calc(var(--notes-w) + var(--gutter)); }
  body.notes-open .toasts { right: calc(var(--notes-w) + var(--gutter)); }
}