/* ============================================================================
   Accent themes
   ----------------------------------------------------------------------------
   Tailwind v4 compiles `text-indigo-400` to `color: var(--color-indigo-400)`,
   so an accent is not a restyle -- it is a remap of the two scales the whole UI
   is already built on. Redefining them here retints every button, gradient,
   ring, focus state and selection at once, with no change to any view.

   `html[data-accent="x"]` scores (0,1,1) against the :root where Tailwind
   defines these, so it wins without !important.

   Values are literal rather than `var(--color-teal-500)` because Tailwind v4
   tree-shakes unused colours out of :root entirely -- teal, fuchsia and zinc
   emit nothing at all in this build, so referencing them would silently resolve
   to nothing. These are the canonical Tailwind values for each scale.

   What is deliberately NOT remapped: emerald (success), amber (warning) and
   red/rose (destructive). An accent that ate those would make the Danger Zone
   read as ordinary chrome. It is also why there is no green or orange accent,
   and why Protocol is fuchsia rather than a rose that sits next to danger red.

   Accent is orthogonal to light/dark -- each block below works in both, which
   is why five accents cost five blocks instead of ten themes.

   Noterize (indigo/purple) is the Tailwind default and needs no block.
   ============================================================================ */

/* Tag and project colours are the user's data, not the app's chrome, so they opt
   out of the remap above. Custom properties inherit, so re-declaring them on the
   element itself beats the html[data-accent] ancestor without any !important.

   This restores the WHOLE indigo and purple range, not just the two shades the
   palette classes name. A pill carries `text-indigo-300`, but other rules
   recolour it through different shades -- the light-mode block rewrites
   .text-indigo-300 to var(--color-indigo-700), which followed the accent while
   only 300 and 500 were pinned, so indigo pill text drifted in light mode. Any
   shade an accent remaps has to be restored here, or some rule somewhere will
   reach the one that was missed.

   The other six palette colours need nothing -- no accent remaps emerald, amber,
   rose, cyan, slate or pink, for the same reason accents leave semantic colour
   alone. Values are Tailwind's canonical indigo/purple. */
.palette-color {
  --color-indigo-50: oklch(96.2% .018 272.314);
  --color-indigo-100: oklch(93% .034 272.788);
  --color-indigo-200: oklch(87% .065 274.039);
  --color-indigo-300: oklch(78.5% .115 274.713);
  --color-indigo-400: oklch(67.3% .182 276.935);
  --color-indigo-500: oklch(58.5% .233 277.117);
  --color-indigo-600: oklch(51.1% .262 276.966);
  --color-indigo-700: oklch(45.7% .24 277.023);
  --color-indigo-800: oklch(39.8% .195 277.366);
  --color-purple-300: oklch(82.7% .119 306.383);
  --color-purple-400: oklch(71.4% .203 305.504);
  --color-purple-500: oklch(62.7% .265 303.9);
  --color-purple-600: oklch(55.8% .288 302.321);
  --color-purple-700: oklch(49.6% .265 301.924);
}

/* Cobalt -- A cooler, truer blue. */
html[data-accent="cobalt"] {
  --color-indigo-50: oklch(97% .014 254.604);
  --color-indigo-100: oklch(93.2% .032 255.585);
  --color-indigo-200: oklch(88.2% .059 254.128);
  --color-indigo-300: oklch(80.9% .105 251.813);
  --color-indigo-400: oklch(70.7% .165 254.624);
  --color-indigo-500: oklch(62.3% .214 259.815);
  --color-indigo-600: oklch(54.6% .245 262.881);
  --color-indigo-700: oklch(48.8% .243 264.376);
  --color-indigo-800: oklch(42.4% .199 265.638);
  --color-purple-400: oklch(74.6% .16 232.661);
  --color-purple-500: oklch(68.5% .169 237.323);
  --color-purple-600: oklch(58.8% .158 241.966);
  --color-purple-700: oklch(50% .134 242.749);
}

/* Ocean -- Deep teal. */
html[data-accent="ocean"] {
  --color-indigo-50: oklch(98.4% .014 180.72);
  --color-indigo-100: oklch(95.3% .051 180.801);
  --color-indigo-200: oklch(91% .096 180.426);
  --color-indigo-300: oklch(85.5% .138 181.071);
  --color-indigo-400: oklch(77.7% .152 181.912);
  --color-indigo-500: oklch(70.4% .14 182.503);
  --color-indigo-600: oklch(60% .118 184.704);
  --color-indigo-700: oklch(51.1% .096 186.391);
  --color-indigo-800: oklch(43.7% .078 188.216);
  --color-purple-400: oklch(78.9% .154 211.53);
  --color-purple-500: oklch(71.5% .143 215.221);
  --color-purple-600: oklch(60.9% .126 221.723);
  --color-purple-700: oklch(52% .105 223.128);
}

/* Protocol -- Magenta, kept clear of danger red. */
html[data-accent="protocol"] {
  --color-indigo-50: oklch(97.7% .017 320.058);
  --color-indigo-100: oklch(95.2% .037 318.852);
  --color-indigo-200: oklch(90.3% .076 319.62);
  --color-indigo-300: oklch(83.3% .145 321.434);
  --color-indigo-400: oklch(74% .238 322.16);
  --color-indigo-500: oklch(66.7% .295 322.15);
  --color-indigo-600: oklch(59.1% .293 322.896);
  --color-indigo-700: oklch(51.8% .253 323.949);
  --color-indigo-800: oklch(45.2% .211 324.591);
  --color-purple-400: oklch(71.8% .202 349.761);
  --color-purple-500: oklch(65.6% .241 354.308);
  --color-purple-600: oklch(59.2% .249 .584);
  --color-purple-700: oklch(52.5% .223 3.958);
}

/* Graphite -- No accent at all. */
html[data-accent="graphite"] {
  --color-indigo-50: oklch(98.5% 0 none);
  --color-indigo-100: oklch(96.7% .001 286.375);
  --color-indigo-200: oklch(92% .004 286.32);
  --color-indigo-300: oklch(87.1% .006 286.286);
  --color-indigo-400: oklch(70.5% .015 286.067);
  --color-indigo-500: oklch(55.2% .016 285.938);
  --color-indigo-600: oklch(44.2% .017 285.786);
  --color-indigo-700: oklch(37% .013 285.805);
  --color-indigo-800: oklch(27.4% .006 286.033);
  --color-purple-400: oklch(70.5% .015 286.067);
  --color-purple-500: oklch(55.2% .016 285.938);
  --color-purple-600: oklch(44.2% .017 285.786);
  --color-purple-700: oklch(37% .013 285.805);
}

/* Sleek, Ultra-Thin Custom Scrollbars for All Themes */
* {
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #334155;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #475569;
}

/* Layout Shift & Flicker Elimination CSS Rules (SSR Light DOM + Custom Element Hydration) */
time {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.editor-container {
  contain: layout style;
}

/* Format Toolbar Smooth Slide & Fade Transition Rules */
[data-rich-editor-target="toolbar"],
.editor-toolbar-bar {
  display: flex !important;
  position: sticky !important;
  top: 1rem !important;
  z-index: 30 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  /* Collapsed Base State */
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(0.98);
  transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease-out,
              margin-bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-width 0.2s ease-out,
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Expanded Active State */
.toolbar-active [data-rich-editor-target="toolbar"],
.toolbar-active .editor-toolbar-bar {
  max-height: 140px !important;
  opacity: 1 !important;
  margin-bottom: 0.75rem !important;
  padding: 0.25rem !important;
  border-width: 1px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1);
}

/* Rich Editor Custom Styling & Zero-Flicker Layout */
.rich-editor-content {
  outline: none !important;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #cbd5e1 !important;
  padding-top: 0.75rem !important;
  min-height: 400px;
}

html.light .rich-editor-content {
  color: #0f172a !important;
}

.rich-editor-content ul:not(.contains-task-list) {
  list-style-type: disc !important;
  margin-left: 1.75rem !important;
  margin-bottom: 1.25rem !important;
  padding-left: 0.25rem !important;
}

.rich-editor-content ol {
  list-style-type: decimal !important;
  margin-left: 1.75rem !important;
  margin-bottom: 1.25rem !important;
  padding-left: 0.25rem !important;
}

.rich-editor-content li {
  margin-bottom: 0.2rem !important;
  line-height: 1.5 !important;
}

.rich-editor-content li.task-list-item,
.rich-editor-content li[aria-checked],
.rich-editor-content ul.contains-task-list > li {
  list-style: none !important;
  position: relative;
  padding-inline-start: 1.75rem !important;
  margin-inline-start: -1.75rem;
  cursor: pointer;
}

.rich-editor-content li.task-list-item::before,
.rich-editor-content li[aria-checked]::before,
.rich-editor-content ul.contains-task-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  border: 2px solid #4f5a6e;
  border-radius: 0.375rem;
  background-color: transparent;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rich-editor-content li[aria-checked="true"]::before,
.rich-editor-content li.task-list-item[aria-checked="true"]::before {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  background-color: var(--color-indigo-500) !important;
  border: 2px solid var(--color-indigo-400) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 75% !important;
  box-sizing: border-box !important;
  transform: none !important;
  opacity: 1 !important;
}

html.light .rich-editor-content li[aria-checked="true"]::before,
html.light .rich-editor-content li.task-list-item[aria-checked="true"]::before {
  background-color: var(--color-indigo-600) !important;
  border: 2px solid var(--color-indigo-700) !important;
}

.rich-editor-content li[aria-checked="true"] {
  text-decoration: line-through;
  color: #94a3b8 !important;
}

html.light .rich-editor-content li[aria-checked="true"] {
  text-decoration: line-through;
  color: #64748b !important;
}

.rich-editor-content ul.contains-task-list {
  list-style: none !important;
  margin-top: 0 !important;
  padding-inline-start: 1.75rem !important;
  margin-left: 0.25rem !important;
}

/* Nested checklists are now a real structure (Tab indents a list item), so they
   keep the same 32px-per-level step as bullet and ordered lists rather than
   being flattened. This previously forced margin-left to 0 to suppress the
   double indent that pasted markup caused -- that was correct when nesting could
   only arrive by accident, and wrong now that it is intentional. */

/* A sublist must not carry the 1.25rem bottom margin that separates a top-level
   list from the content after it. Inside an <li> that margin lands between the
   last nested item and the next item of the OUTER list, which reads as a blank
   paragraph -- most visible right after Shift-Tab, since outdenting a middle item
   moves its trailing siblings into a fresh sublist.

   The :not() and .contains-task-list qualifiers below are NOT decoration -- they
   are required to out-specify the top-level rules. `.rich-editor-content
   ul:not(.contains-task-list)` scores (0,2,1); a plain `.rich-editor-content
   li > ul` scores only (0,1,2) and LOSES on the class column, so it would never
   apply even though it appears later in the file (both sides are !important, so
   source order is not the tie-breaker). */
.rich-editor-content li > ul:not(.contains-task-list),
.rich-editor-content li > ul.contains-task-list,
.rich-editor-content li > ol,
.action-text-content li > ul,
.action-text-content li > ol,
.trix-content li > ul,
.trix-content li > ol {
  margin-bottom: 0 !important;
}

/* Centered Image Insertion & Media Styling */
.editor-image-container,
.rich-editor-content figure.editor-image-figure,
.action-text-content figure.editor-image-figure {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 1.5rem auto !important;
  text-align: center !important;
  width: 100% !important;
}

.rich-editor-content img,
.action-text-content img {
  display: block !important;
  margin: 1.25rem auto 0.5rem auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
}

/* Clear, Editable Image Captions */
.rich-editor-content figcaption,
.action-text-content figcaption {
  display: inline-block !important;
  margin-top: 0.375rem !important;
  font-size: 0.875rem !important;
  font-style: italic !important;
  color: #94a3b8 !important;
  text-align: center !important;
  cursor: text !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 0.375rem !important;
  border: 1px dashed transparent !important;
  transition: all 0.15s ease-in-out !important;
  min-width: 120px !important;
}

.rich-editor-content figcaption:hover,
.action-text-content figcaption:hover {
  border-color: color-mix(in oklch, var(--color-indigo-500) 40%, transparent) !important;
  background-color: rgba(30, 41, 59, 0.4) !important;
}

.rich-editor-content figcaption:focus,
.action-text-content figcaption:focus {
  outline: none !important;
  color: #f1f5f9 !important;
  border-color: var(--color-indigo-500) !important;
  background-color: rgba(30, 41, 59, 0.8) !important;
}

html.light .rich-editor-content figcaption,
html.light .action-text-content figcaption {
  color: #64748b !important;
}

html.light .rich-editor-content figcaption:hover,
html.light .action-text-content figcaption:hover {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

html.light .rich-editor-content figcaption:focus,
html.light .action-text-content figcaption:focus {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  border-color: var(--color-indigo-600) !important;
}

/* Blockquote & Code Block Editor Formatting */
.rich-editor-content blockquote,
.action-text-content blockquote {
  border-left: 4px solid var(--color-indigo-500) !important;
  padding-left: 1rem !important;
  margin: 1rem 0 !important;
  color: #94a3b8 !important;
  font-style: italic !important;
}

.rich-editor-content pre,
.action-text-content pre {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  margin: 1rem 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875rem !important;
  color: #e2e8f0 !important;
  overflow-x: auto !important;
}

/* Notion-style Table Blocks */
.rich-editor-content .rich-editor-table-wrapper,
.action-text-content .rich-editor-table-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  margin: 1.25rem 0 !important;
  border-radius: 0.5rem !important;
  border: 1px solid #334155 !important;
}

.rich-editor-content table.rich-editor-table,
.action-text-content table.rich-editor-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

.rich-editor-content .rich-editor-table td,
.action-text-content .rich-editor-table td {
  border: 1px solid #334155 !important;
  padding: 0.625rem 0.875rem !important;
  min-width: 8rem !important;
  color: #cbd5e1 !important;
  vertical-align: top !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.rich-editor-content .rich-editor-table tr:nth-child(even) td,
.action-text-content .rich-editor-table tr:nth-child(even) td {
  background-color: rgba(15, 23, 42, 0.4) !important;
}

.rich-editor-content .rich-editor-table td:focus,
.rich-editor-content .rich-editor-table td:focus-within,
.action-text-content .rich-editor-table td:focus,
.action-text-content .rich-editor-table td:focus-within {
  outline: none !important;
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--color-indigo-500) 50%, transparent) !important;
}

/* Inline File Attachment Badges */
.note-file-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.25rem 0.625rem !important;
  margin: 0.25rem 0.125rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background-color: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(51, 65, 85, 0.8) !important;
  color: var(--color-indigo-300) !important;
  transition: all 0.15s ease-in-out !important;
}

.note-file-link:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
  border-color: var(--color-indigo-500) !important;
}

/* Light Mode Overrides for Files and Cards */
html.light .note-file-link {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: var(--color-indigo-600) !important;
}

html.light .note-file-link:hover {
  background-color: var(--color-indigo-100) !important;
  color: var(--color-indigo-800) !important;
}

html.light .note-file-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light .note-file-card p.text-slate-200 {
  color: #0f172a !important;
}

/* Check List Styling
 * Check list items are <li aria-checked="true|false"> — there is no <input> in
 * the live DOM. We use ::before to draw the checkbox and [aria-checked="true"]
 * to style the completed state.
 * -------------------------------------------------------------------------- */

/* Reset bullet for check-list items in the editor */
.action-text-content li[aria-checked] {
  list-style: none !important;
  position: relative;
  padding-inline-start: 1.75rem !important;
  margin-inline-start: -1.75rem;
  cursor: pointer;
}

/* Uncheck state — empty rounded square */
.action-text-content li[aria-checked]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  border: 2px solid #4f5a6e;
  border-radius: 0.375rem;
  background-color: transparent;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Checked state — filled with indigo + checkmark, retaining distinct border & fixed size */
.action-text-content li[aria-checked="true"]::before {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  background-color: var(--color-indigo-500) !important;
  border: 2px solid var(--color-indigo-400) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 75% !important;
  box-sizing: border-box !important;
  transform: none !important;
  opacity: 1 !important;
}

html.light .action-text-content li[aria-checked="true"]::before {
  background-color: var(--color-indigo-600) !important;
  border: 2px solid var(--color-indigo-700) !important;
}

/* Checked text — strikethrough + faded without shrinking or fading the checkbox */
.action-text-content li[aria-checked="true"] {
  text-decoration: line-through;
  color: #94a3b8 !important;
}

html.light .action-text-content li[aria-checked="true"] {
  text-decoration: line-through;
  color: #64748b !important;
}

/* Also reset the ul margin/indent for check lists so padding-inline-start works.
   margin-bottom matches the editor, where .rich-editor-content ul:not(.contains-task-list)
   excludes checklists from the 1.25rem list margin -- without it a saved checklist
   sat 20px lower than the one being edited. */
.action-text-content ul:has(li[aria-checked]) {
  list-style: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-inline-start: 1.75rem !important;
  margin-left: 0.25rem !important;
}

/* Block typography for the LIVE EDITOR.
 *
 * Tailwind's preflight resets h1-h6 to `font-size: inherit; font-weight: inherit`,
 * and the rules below this block only ever targeted .action-text-content /
 * .trix-content -- the saved view. So a heading created in the editor (via the
 * "# " markdown shortcut or the H1/H2 toolbar buttons) was a real <h1> in the DOM
 * that rendered identically to body text, and only looked like a heading after
 * the note was saved and re-rendered.
 *
 * The editor is the preview, so these mirror the saved-view values below. Keep
 * the two in sync. Only the types the editor didn't already style are listed
 * here: p/ul/ol/li/table keep their existing .rich-editor-content rules above. */
/* Type scale is anchored to the note TITLE, which is text-3xl/sm:text-4xl at
 * weight 800 (1.875rem -> 2.25rem). Headings inside the body are subordinate to
 * it, so they start below 1.875rem and step down from there:
 *
 *   title 2.25rem -> h1 1.75rem -> h2 1.5rem -> h3 1.25rem -> body 1.125rem
 *
 * Vertical margins are deliberately ZERO. Spacing between blocks is the writer's
 * call -- if they want a gap they press Return. Baking one in makes the editor
 * lie about what the saved note will look like, and takes the decision away from
 * them. Size and weight carry the hierarchy instead. */
.rich-editor-content h1 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}

.rich-editor-content h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.35 !important;
}

.rich-editor-content h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}

.rich-editor-content blockquote {
  border-left: 3px solid var(--color-indigo-500) !important;
  padding-left: 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  font-style: italic !important;
  color: #94a3b8 !important;
}

.rich-editor-content code {
  background-color: #1e293b !important;
  color: var(--color-indigo-400) !important;
  border: 1px solid #334155 !important;
  border-radius: 0.375rem !important;
  padding: 0.125rem 0.375rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.9em !important;
}

.rich-editor-content pre {
  background-color: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 0.75rem !important;
  padding: 1rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
  overflow-x: auto !important;
}

.rich-editor-content pre code {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #e2e8f0 !important;
}

/* Toolbar's horizontalRule() emits an <hr>; same story as the headings. */
.rich-editor-content hr {
  border: none !important;
  border-top: 1px solid #334155 !important;
  margin: 1.5rem 0 !important;
}

/* Stated explicitly so it can't silently diverge from the saved view, which had
   a 1rem paragraph margin the editor never showed. */
.rich-editor-content p {
  margin-bottom: 0 !important;
  line-height: 1.75 !important;
}

/* Nothing above the first block, so its top margin has nothing to separate it
 * from -- it just pushes the content down and reads as a blank line. That is
 * especially loud for a heading: h1's 1.5rem is ~24px against a ~29px body line,
 * so applying H1 to the top line looked like it inserted an empty line above.
 *
 * The editor is a flex item, which establishes a block formatting context, so
 * this margin cannot collapse out of it the way it would in a plain container --
 * it becomes real space inside the editor. Reset it on the first child of both
 * the editor and the rendered view so the two stay identical. */
.rich-editor-content > *:first-child,
.action-text-content > *:first-child,
.trix-content > *:first-child {
  margin-top: 0 !important;
}

/* Light mode: headings above hardcode near-white, which is invisible on a white
   page. Mirrors the html.light .action-text-content treatment further down. */
html.light .rich-editor-content h1,
html.light .rich-editor-content h2,
html.light .rich-editor-content h3 {
  color: #0f172a !important;
}

html.light .rich-editor-content blockquote {
  color: #475569 !important;
}

.action-text-content,
.trix-content {
  color: #cbd5e1 !important;

  /* Must match the .rich-editor-content heading rules above -- the editor is the
     preview, so any divergence here is a WYSIWYG bug. See the comment there for
     why the scale is anchored to the title and why the margins are zero. */
  h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }

  h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.35 !important;
  }

  h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
  }

  /* Zero, matching the editor (which has no paragraph margin at all). A 1rem gap
     here meant a <p>-based note rendered looser after saving than it looked while
     being written -- and it injected spacing the writer never asked for. */
  p {
    margin-bottom: 0 !important;
    line-height: 1.75 !important;
  }

  ul {
    list-style-type: disc !important;
    margin-left: 1.75rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 0.25rem !important;
  }

  ol {
    list-style-type: decimal !important;
    margin-left: 1.75rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 0.25rem !important;
  }

  li {
    margin-bottom: 0.2rem !important;
    line-height: 1.5 !important;
  }

  li p {
    margin-bottom: 0 !important;
    display: inline !important;
  }

  blockquote {
    border-left: 3px solid var(--color-indigo-500) !important;
    padding-left: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    font-style: italic !important;
    color: #94a3b8 !important;
  }

  code {
    background-color: #1e293b !important;
    color: var(--color-indigo-400) !important;
    border: 1px solid #334155 !important;
    border-radius: 0.375rem !important;
    padding: 0.125rem 0.375rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.9em !important;
  }

  pre {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1.25rem !important;
    overflow-x: auto !important;

    code {
      background-color: transparent !important;
      border: none !important;
      padding: 0 !important;
      color: #e2e8f0 !important;
    }
  }

  table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  th {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #334155 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  td {
    background-color: transparent !important;
    font-weight: normal !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #1e293b !important;
    color: #cbd5e1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  tr:nth-child(even) td {
    background-color: rgba(15, 23, 42, 0.4) !important;
  }

  a {
    color: var(--color-indigo-400) !important;
    text-decoration: underline !important;

    &:hover {
      color: var(--color-indigo-300) !important;
    }
  }

  hr {
    border: none !important;
    border-top: 1px solid #334155 !important;
    margin: 1.5rem 0 !important;
  }
}

/* Radio & Checkbox Theme Styling */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-indigo-500) !important;
  color: var(--color-indigo-500) !important;
  cursor: pointer !important;
}

html.light input[type="radio"],
html.light input[type="checkbox"] {
  accent-color: var(--color-indigo-600) !important;
  color: var(--color-indigo-600) !important;
}

/* Complete Light Mode Styling System */
html.light {

  /* Main Workspace Background */
  main.bg-slate-950,
  main {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }

  /* Sidebar Background & Borderless Separation */
  aside,
  aside.bg-slate-900 {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    border-right: none !important;
    border-right-color: transparent !important;
  }

  aside.border-r,
  aside .border-r {
    border-right-color: transparent !important;
    border-right: none !important;
  }

  /* Sidebar Header & Tags Borders */
  aside .border-b,
  aside .border-t {
    border-color: #e2e8f0 !important;
  }

  /* Sidebar Username Footer (a distinct shade darker mirroring dark mode) */
  aside div.bg-slate-950\/40,
  aside .bg-slate-950\/40 {
    background-color: #e2e8f0 !important;
    background: #e2e8f0 !important;
    border-top: 1px solid #cbd5e1 !important;
  }

  aside .bg-slate-950\/40 .text-slate-300,
  aside .bg-slate-950\/40 p {
    color: #0f172a !important;
  }

  /* Search Trigger Box in Light Mode Sidebar */
  aside .bg-slate-950\/60 {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;

    &:hover {
      background-color: #ffffff !important;
    }
  }

  /* Tag Count Badge in Light Mode Sidebar */
  aside .bg-slate-950\/70 {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
  }

  /* Note Item Selection & Hover in Light Mode Sidebar */
  aside a.hover\:bg-slate-800\/60:hover {
    background-color: #e2e8f0 !important;
  }

  /* Tag Row & Tag Customize Button Hover in Light Mode Sidebar */
  aside .hover\:bg-slate-800\/70:hover {
    background-color: #e2e8f0 !important;
  }

  aside .hover\:bg-slate-700\/60:hover {
    background-color: #cbd5e1 !important;
  }

  aside a.bg-indigo-500\/10 {
    background-color: var(--color-indigo-100) !important;
    border-color: var(--color-indigo-200) !important;

    span {
      color: var(--color-indigo-800) !important;
    }
  }

  /* General Background Overrides for Cards/Modals */
  div.bg-slate-900,
  div.bg-slate-950 {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }

  /* Borders in Light Mode */
  .border-slate-800,
  .border-slate-800\/80,
  .border-slate-800\/60,
  .border-slate-900 {
    border-color: #e2e8f0 !important;
  }

  /* Text Colors in Light Mode */
  .text-white,
  h1, h2, h3, h4,
  input[type="text"] {
    color: #0f172a !important;
  }

  /* ...but a label sitting on a saturated fill has to stay white. The rule
     above assumes .text-white means "white text on a dark surface", which is
     wrong for filled buttons -- a red Delete button would render near-black on
     red. Tinted surfaces (bg-*-500/10 and friends) are deliberately excluded:
     those really are light in light mode and want the dark text. */
  :is(
    .bg-red-600, .bg-red-500,
    .bg-indigo-600, .bg-indigo-500,
    .bg-blue-600, .bg-blue-500,
    .bg-emerald-600, .bg-emerald-500,
    [class*="bg-gradient-to-"]
  ).text-white {
    color: #ffffff !important;
  }

  .action-text-content,
  .trix-content {
    color: #0f172a !important;

    h1 { color: #0f172a !important; }
    h2 { color: #0f172a !important; }
    h3 { color: #0f172a !important; }
    p, li, span, div { color: #0f172a !important; }
  }

  .text-slate-100,
  .text-slate-200,
  .text-slate-300 {
    color: #1e293b !important;
  }

  .text-slate-400,
  .text-slate-500 {
    color: #64748b !important;
  }

  /* Tag Palette Text (tag dialog, sidebar chips, note tag zone) */
  .text-indigo-300,
  .text-indigo-400 {
    color: var(--color-indigo-700) !important;
  }

  .text-emerald-300,
  .text-emerald-400 {
    color: #047857 !important;
  }

  /* amber-200 (#fde68a) is the lightest of these and was the one shade with no
     mapping -- readable on a dark card, ~1.4:1 on a white one. It reads as the
     operator/admin accent, so it lands on light surfaces the moment an admin
     opens their account page. */
  .text-amber-200,
  .text-amber-300,
  .text-amber-400 {
    color: #b45309 !important;
  }

  .text-rose-300,
  .text-rose-400 {
    color: #be123c !important;
  }

  /* Destructive text: alert flashes, form errors, the Danger Zone heading and
     delete-icon hovers. Without this, red-400 (#f87171) lands on a white card
     or a bg-red-500/10 tint at ~2.5:1 -- the one palette colour that had no
     light-mode mapping while rose/amber/emerald all did. */
  .text-red-200,
  .text-red-300,
  .text-red-400 {
    color: #b91c1c !important;
  }

  .hover\:text-red-200:hover,
  .hover\:text-red-300:hover,
  .hover\:text-red-400:hover {
    color: #991b1b !important;
  }

  .text-cyan-300,
  .text-cyan-400 {
    color: #0e7490 !important;
  }

  .text-purple-300,
  .text-purple-400 {
    color: #7e22ce !important;
  }

  .text-pink-300,
  .text-pink-400 {
    color: #be185d !important;
  }

  .hover\:text-indigo-200:hover,
  .hover\:text-indigo-300:hover {
    color: var(--color-indigo-800) !important;
  }

  .placeholder-slate-600::placeholder,
  .placeholder-slate-700::placeholder {
    color: #94a3b8 !important;
  }

  /* Hover and Active State Overrides in Sidebar and Buttons */
  .hover\:bg-slate-800\/60:hover,
  .hover\:bg-slate-800:hover,
  .hover\:bg-slate-900:hover {
    background-color: #f1f5f9 !important;
  }

  /* Format Toolbar Styling in Light Mode */
  [data-editor-toolbar-target="button"] {
    color: #334155 !important;

    &:hover {
      color: #0f172a !important;
      background-color: #f1f5f9 !important;
    }

    span {
      color: inherit !important;
    }
  }

  [data-editor-toolbar-target="button"].text-indigo-400,
  .toolbar-active [data-editor-toolbar-target="button"] {
    color: var(--color-indigo-600) !important;
    background-color: var(--color-indigo-50) !important;
    border-color: var(--color-indigo-200) !important;

    span {
      color: var(--color-indigo-600) !important;
    }
  }

  .editor-toolbar-bar,
  [data-rich-editor-target="toolbar"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;

    button {
      color: #475569 !important;

      &:hover {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
      }

      svg {
        stroke: #475569 !important;
      }

      &:hover svg {
        stroke: #0f172a !important;
      }
    }

    .h-4.w-px {
      background-color: #e2e8f0 !important;
    }
  }

  .bg-slate-800,
  .bg-slate-800\/80,
  .bg-slate-800\/60 {
    background-color: #f1f5f9 !important;
  }

  /* Secondary submit buttons (e.g. Change Password). The rule above flattens
     bg-slate-800 to near-white, which makes a filled button disappear against
     a white card -- readable, but it stops looking like a button. Give it a
     visible chip. Scoped to submits so editor toolbar <button>s keep their own
     styling below. */
  input[type="submit"].bg-slate-800 {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
  }

  /* Settings Radio Cards */
  label.border-slate-800 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;

    &:hover {
      background-color: #f8fafc !important;
    }
  }

  /* Rendered Rich Text Content */
  .action-text-content {
    color: #1e293b !important;
  }

  th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
  }

  td {
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
  }

  tr:nth-child(even) td {
    background-color: #f8fafc !important;
  }

  /* Editor tables (the ones insertTable() builds, carrying .rich-editor-table).
     The bare `th`/`td` rules above score only (0,1,2) and LOSE to
     `.rich-editor-content .rich-editor-table td` at (0,2,1), so without these the
     editor's tables kept their dark-mode palette on a white page: #cbd5e1 text,
     a #334155 border, and an rgba(15,23,42,.4) stripe on even rows.

     Note the border stays 1px -- it only LOOKED heavier in light mode because
     #334155 against white is near-maximum contrast, where against the dark
     background it is barely visible. The fix is the colour, not the width.

     Nesting inside html.light lifts these to (0,3,2), which wins. */
  .rich-editor-content .rich-editor-table-wrapper,
  .action-text-content .rich-editor-table-wrapper {
    border-color: #e2e8f0 !important;
  }

  .rich-editor-content .rich-editor-table td,
  .action-text-content .rich-editor-table td {
    border-color: #e2e8f0 !important;
    color: #334155 !important;
  }

  .rich-editor-content .rich-editor-table th,
  .action-text-content .rich-editor-table th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }

  .rich-editor-content .rich-editor-table tr:nth-child(even) td,
  .action-text-content .rich-editor-table tr:nth-child(even) td {
    background-color: #f8fafc !important;
  }

  /* Light Mode Scrollbar Overrides */
  * {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
  }

  /* Light Mode Layout & Background Overrides */
  body,
  .bg-slate-950 {
    background-color: #f8fafc !important;
    color: #0f172a !important;
  }

  main.editor-container {
    background-color: #ffffff !important;
  }

  aside,
  .bg-slate-900 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
  }

  /* Light Mode Buttons & Floating Action Cluster */
  .bg-slate-900\/60,
  .bg-slate-900\/80,
  .bg-slate-900\/90,
  .bg-slate-900\/95,
  .bg-slate-950\/60,
  .bg-slate-950\/40,
  .bg-slate-950\/70,
  .bg-slate-950\/80 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
  }

  /* Inline File/Image Attachment Card Hover Border (note body) */
  .hover\:border-slate-700:hover {
    border-color: #cbd5e1 !important;
  }

  .group:hover .group-hover\:text-white {
    color: #0f172a !important;
  }

  button,
  kbd {
    border-color: #cbd5e1 !important;
  }

  /* Text & Border Colors */
  .text-slate-100,
  .text-slate-200,
  .text-slate-300,
  .text-white {
    color: #0f172a !important;
  }

  .text-slate-400,
  .text-slate-500 {
    color: #475569 !important;
  }

  .placeholder-slate-500::placeholder,
  .placeholder-slate-600::placeholder {
    color: #94a3b8 !important;
  }

  .border-slate-800,
  .border-slate-800\/80,
  .border-slate-800\/60,
  .border-slate-700 {
    border-color: #e2e8f0 !important;
  }

  /* Title Divider Rule in Light Mode (one shade darker: #e2e8f0) */
  .border-t.border-slate-700\/60,
  .border-slate-700\/60,
  .border-t.border-slate-800\/40,
  .border-slate-800\/40 {
    border-color: #e2e8f0 !important;
  }

  /* Ensure primary indigo buttons and the gradient brand tile retain crisp white text and SVG icons in Light Mode */
  .bg-indigo-600,
  .bg-indigo-500,
  .bg-indigo-600 *,
  .bg-indigo-500 *,
  .bg-gradient-to-tr,
  .bg-gradient-to-r,
  .bg-gradient-to-tr *,
  .bg-gradient-to-r * {
    color: #ffffff !important;
  }

  /* Active Note Item High-Contrast Styling in Light Mode */
  .bg-indigo-500\/10 {
    background-color: color-mix(in oklch, var(--color-indigo-500) 15%, transparent) !important;
    border-color: color-mix(in oklch, var(--color-indigo-500) 40%, transparent) !important;
  }

  /* Only active note title gets bold font-weight */
  .bg-indigo-500\/10 .text-indigo-200 {
    color: #1e1b4b !important;
    font-weight: 700 !important;
  }

  /* Preview snippet text stays normal weight (400) */
  .bg-indigo-500\/10 p.text-slate-400,
  .bg-indigo-500\/10 .text-slate-400,
  .bg-indigo-500\/10 .text-slate-500 {
    color: #312e81 !important;
    font-weight: 400 !important;
  }

  /* Light Mode Custom Context Menu Overrides */
  #custom-context-menu {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;

    button {
      color: #1e293b !important;

      &:hover {
        background-color: #f1f5f9 !important;
        color: var(--color-indigo-600) !important;
      }
    }

    kbd {
      background-color: #f1f5f9 !important;
      border-color: #cbd5e1 !important;
      color: #64748b !important;
    }

    .border-t {
      border-color: #e2e8f0 !important;
    }
  }
}

/* Suppress Turbo top progress bar for background auto-saves */
.turbo-progress-bar {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Styled Inline Tag Pills in Editor Canvas */
.tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.75rem !important; /* px-3 py-1 */
  margin: 0 0.25rem !important;
  border-radius: 0.5rem !important; /* rounded-lg */
  font-size: 0.875rem !important; /* text-sm (14px) */
  line-height: 1.25rem !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
  user-select: none !important;
}

.tag-pill svg {
  display: inline-block !important;
  margin-right: 0.5rem !important; /* space between icon and tag text */
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
  min-width: 1rem !important;
  min-height: 1rem !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 2px !important;
  fill: none !important;
}

/* Styled Inline File Attachment Cards in Editor Canvas */
figure.note-file-card-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  padding: 0.75rem 0.875rem !important;
  background-color: rgba(15, 23, 42, 0.95) !important; /* bg-slate-900 */
  border: 1px solid rgba(30, 41, 59, 0.8) !important; /* border-slate-800 */
  border-radius: 0.875rem !important; /* rounded-xl */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
  width: 24rem !important; /* Standard card width: 384px */
  max-width: 100% !important;
  user-select: none !important;
  cursor: default !important;
}

figure.note-file-card-inline > div:first-child,
figure.note-file-card-inline .note-file-card-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  padding-right: 0.5rem !important;
}

figure.note-file-card-inline .note-file-card-icon,
figure.note-file-card-inline > div:first-child > div:first-child {
  width: 2.5rem !important; /* 40px badge */
  height: 2.5rem !important; /* 40px badge */
  border-radius: 0.5rem !important; /* rounded-lg */
  background-color: color-mix(in oklch, var(--color-indigo-500) 10%, transparent) !important;
  border: 1px solid color-mix(in oklch, var(--color-indigo-500) 20%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

figure.note-file-card-inline .note-file-card-text,
figure.note-file-card-inline > div:first-child > div:nth-child(2) {
  min-width: 0 !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}

figure.note-file-card-inline p,
figure.note-file-card-inline .note-file-card-title {
  font-size: 0.8125rem !important; /* 13px */
  font-weight: 600 !important;
  color: #f1f5f9 !important; /* slate-100 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  line-height: 1.25rem !important;
}

figure.note-file-card-inline p:last-child,
figure.note-file-card-inline .note-file-card-meta {
  font-size: 0.75rem !important; /* 12px */
  color: #94a3b8 !important; /* slate-400 */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  margin-top: 0.125rem !important;
  margin-bottom: 0 !important;
  font-weight: 400 !important;
}

figure.note-file-card-inline > div:last-child,
figure.note-file-card-inline .note-file-card-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.25rem !important; /* 4px gap */
  flex-shrink: 0 !important;
}

figure.note-file-card-inline button,
figure.note-file-card-inline a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.375rem !important; /* 6px padding */
  border-radius: 0.5rem !important; /* rounded-lg */
  color: #94a3b8 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  pointer-events: auto !important; /* Enable button & link clicks */
  line-height: 1 !important;
  text-decoration: none !important;
}

figure.note-file-card-inline button:hover,
figure.note-file-card-inline a:hover {
  color: var(--color-indigo-400) !important; /* indigo-400 */
  background-color: rgba(30, 41, 59, 0.9) !important; /* bg-slate-800 */
  border-color: rgba(51, 65, 85, 0.7) !important;
}

/* Explicit SVG Icon Sizing */
figure.note-file-card-inline svg {
  display: inline-block !important;
  stroke: currentColor !important;
  stroke-width: 2px !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

figure.note-file-card-inline > div:first-child svg {
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
}

figure.note-file-card-inline > div:last-child svg {
  width: 1rem !important; /* 16px */
  height: 1rem !important; /* 16px */
}

/* Styled Link Preview Cards in Editor Canvas
   Fully !important, like note-file-card-inline above -- plain Tailwind
   classes on these elements get beaten by the `.trix-content`/`.action-text-content`
   `p { margin-bottom: 1rem !important }`-style resets once a note's body is
   server-rendered (it gets wrapped in .trix-content), which is what made the
   card look "crunched" against its own edges inside a note despite looking
   fine on the standalone Links page (a plain view, never wrapped that way). */
figure.link-card {
  position: relative !important;
  display: block !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  width: 24rem !important; /* Same standard card width as note-file-card-inline */
  max-width: 100% !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(30, 41, 59, 0.8) !important;
  background-color: rgba(15, 23, 42, 0.6) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  user-select: none !important;
  cursor: default !important;
  transition: border-color 0.15s ease !important;
}

figure.link-card:hover {
  border-color: rgba(51, 65, 85, 0.9) !important;
}

figure.link-card > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 0.875rem !important;
  text-decoration: none !important;
  color: inherit !important;
}

figure.link-card .link-card-icon {
  width: 2.5rem !important; /* 40px badge, same as note-file-card-inline */
  height: 2.5rem !important;
  border-radius: 0.5rem !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: color-mix(in oklch, var(--color-indigo-500) 10%, transparent) !important;
  border: 1px solid color-mix(in oklch, var(--color-indigo-500) 20%, transparent) !important;
  color: var(--color-indigo-400) !important;
}

figure.link-card .link-card-icon--failed {
  background-color: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
  color: #94a3b8 !important;
}

figure.link-card .link-card-icon--image,
figure.link-card .link-card-icon--favicon {
  background-color: #020617 !important;
  border-color: rgba(30, 41, 59, 0.8) !important;
}

figure.link-card .link-card-icon--favicon {
  padding: 0.4375rem !important;
}

figure.link-card .link-card-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

figure.link-card .link-card-icon--favicon img {
  object-fit: contain !important;
}

figure.link-card .link-card-icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

figure.link-card .link-card-text {
  min-width: 0 !important;
  flex: 1 1 0% !important;
}

figure.link-card .link-card-title {
  margin: 0 !important;
  font-size: 0.8125rem !important; /* 13px, same as note-file-card-title */
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  line-height: 1.25rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

figure.link-card .link-card-delete {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  padding: 0.375rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(2, 6, 23, 0.8) !important;
  border: 1px solid rgba(30, 41, 59, 0.8) !important;
  color: #94a3b8 !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease !important;
  cursor: pointer !important;
}

figure.link-card:hover .link-card-delete,
figure.link-card .link-card-delete:focus-visible {
  opacity: 1 !important;
}

figure.link-card .link-card-delete:hover {
  color: #f87171 !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}

figure.link-card .link-card-delete svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Light Mode overrides */
html.light figure.link-card {
  border-color: #e2e8f0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06) !important;
}

html.light figure.link-card:hover {
  border-color: #cbd5e1 !important;
}

html.light figure.link-card .link-card-icon {
  background-color: var(--color-indigo-50) !important;
  border-color: var(--color-indigo-200) !important;
  color: var(--color-indigo-700) !important;
}

html.light figure.link-card .link-card-icon--failed {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

html.light figure.link-card .link-card-icon--image,
html.light figure.link-card .link-card-icon--favicon {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light figure.link-card .link-card-title {
  color: #0f172a !important;
}

html.light figure.link-card .link-card-delete {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

html.light figure.link-card .link-card-delete:hover {
  color: #dc2626 !important;
  background-color: #fef2f2 !important;
}



/* Checklist Aggregator — Light Mode
 * The page is built from the same slate utilities as the other aggregator pages,
 * but two of them have no entry in the translucent-background override list
 * above (bg-slate-900/40, hover:bg-slate-800/40), so they stayed dark over white.
 * The checkbox is real markup here rather than an li[aria-checked]::before, so it
 * needs its own light treatment -- matched to the editor's checkbox colors.
 * -------------------------------------------------------------------------- */

html.light .checklist-group-header {
  background-color: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

html.light .checklist-empty {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light .checklist-toggle:hover {
  background-color: #f1f5f9 !important;
}

html.light .checklist-box {
  border-color: #94a3b8 !important;
}

/* Mirrors html.light .action-text-content li[aria-checked="true"]::before so a
   ticked item looks the same here as it does inside a note. */
html.light .checklist-toggle[aria-checked="true"] .checklist-box {
  background-color: var(--color-indigo-600) !important;
  border-color: var(--color-indigo-700) !important;
}