/* The `lexxy` gem ships its own fixed blue/ink palette in
   lexxy-variables.css. This app supports several switchable themes
   (light/dark/jumpstart/juicy — see
   app/assets/tailwind/themes/*.css), so rather than hardcode one theme's hex
   value here, alias Lexxy's accent tokens to this app's own semantic tokens.
   That way the editor's accent always matches whichever theme is active,
   with no maintenance burden when a theme's palette changes.

   This file is intentionally a plain, unlayered stylesheet (not part of the
   Tailwind `@layer components` bundle): Tailwind's CSS cascade layers always
   lose to unlayered CSS regardless of source order, so overriding variables
   set by Lexxy's own (unlayered) stylesheet requires staying unlayered too —
   and loading after it (see app/views/application/_head.html.erb). */
:root {
  --lexxy-color-accent-dark: var(--bg-primary);
  --lexxy-color-accent-medium: var(--bg-primary-hover);
  --lexxy-color-selected-dark: var(--bg-primary);
  --lexxy-color-blue: var(--bg-primary);
  --lexxy-font-base: var(--font-sans);
}

/* Inside the dashboard's quick-notes window (AMS-263) the editor sits on
   wallpaper glass, not an app surface: its canvas goes transparent and its
   ink re-aliases to the wallpaper tokens. Same mechanism as above, one scope
   deeper — and it must live in this unlayered file for the same reason the
   :root block does: Lexxy's own stylesheet is unlayered and would beat any
   @layer rule. */
.dashboard-quicknotes__panel {
  --lexxy-color-text: rgb(var(--wallpaper-ink, 255, 255, 255));
  --lexxy-color-ink: rgb(var(--wallpaper-ink, 255, 255, 255));
  /* The toolbar buttons are painted with the canvas: left at Lexxy's white,
     they were white squares hiding white glyphs. Dropdown panels also use it,
     so it becomes the window's own panel tone, opaque — a menu floating over
     text must not be see-through. */
  --lexxy-color-canvas: rgb(var(--wallpaper-panel, 9, 12, 18));
  --lexxy-color-selected: rgba(var(--wallpaper-ink, 255, 255, 255), .16);
  --lexxy-color-selected-hover: rgba(var(--wallpaper-ink, 255, 255, 255), .24);
}

.dashboard-quicknotes__panel .lexxy-editor__toolbar-button {
  background-color: transparent;
}

.dashboard-quicknotes__panel .lexxy-editor__toolbar-button:hover,
.dashboard-quicknotes__panel .lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: rgba(var(--wallpaper-ink, 255, 255, 255), .14);
}

/* The window's editor fills its pane (AMS-263 review): the note's title on
   top, right under the window bar; then Lexxy's toolbar as a full-width
   strip; then the body, taking the rest of the pane and scrolling alone. */
.dashboard-quicknotes__panel .qn__form {
  display: flex;
  flex-direction: column;
}

.dashboard-quicknotes__panel lexxy-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgb(var(--wallpaper-ink, 255, 255, 255));
}

.dashboard-quicknotes__panel lexxy-toolbar {
  margin: 0;
  padding-inline: 10px;
  border: 0;
  border-block: 1px solid rgba(var(--wallpaper-ink, 255, 255, 255), .08);
  border-radius: 0;
  background: rgba(var(--wallpaper-ink, 255, 255, 255), .04);
  color: rgba(var(--wallpaper-ink, 255, 255, 255), .85);
}

.dashboard-quicknotes__panel .lexxy-editor__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 18px 18px;
}

/* Maximized: the strip stays full width and the writing column centers;
   the title stays on the left, where it is in the normal window. */
.dashboard-quicknotes__panel.qn--max .lexxy-editor__content {
  padding-inline: max(18px, calc((100% - 680px) / 2));
}