/* ============================================================================ 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-top: 0.75rem !important; margin-left: 1.75rem !important; margin-bottom: 0.75rem !important; padding-left: 0.25rem !important; } .rich-editor-content ol { list-style-type: decimal !important; margin-top: 0.75rem !important; margin-left: 1.75rem !important; margin-bottom: 0.75rem !important; padding-left: 0.25rem !important; } .rich-editor-content li { margin-bottom: 0.375rem !important; line-height: 1.65 !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.75rem !important; margin-bottom: 0.75rem !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 0.75rem top or bottom margin that separates a top-level list from the content after it. Inside an
  • 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-top: 0.25rem !important; 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: var(--code-bg) !important; border: 1px solid var(--code-border) !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: var(--code-fg) !important; overflow-x: auto !important; /* `pre-wrap`, not `pre`. A code block holds REAL newline characters (see CODE_BLOCK_SELECTOR in rich_editor_controller.js), so the whitespace has to be preserved either way -- but wrapping is what keeps a long line readable on a phone instead of pushing a horizontal scrollbar into the middle of a note. `overflow-x` above still catches an unbreakable token. It also makes the caret behave: with `pre`, a block whose text ends in a newline gives the trailing empty line no layout box, and the caret snaps back up to the line above on the next keystroke. */ white-space: pre-wrap !important; tab-size: 2; } /* ─── Code block chrome & syntax colours ───────────────────────────────── The colours are all VARIABLES, never literals. A theme is then a block that redefines the ten of them (see the code-theme section further down), which is what keeps "add Nord" at a dozen lines rather than a second copy of these rules. The defaults here are the free theme every account gets. The tokens are highlight.js class names. They are grouped rather than enumerated one-to-one: hljs emits ~40 of them and colouring each separately produces a christmas tree, not a readable block. */ .rich-editor-content pre, .action-text-content pre { --code-fg: #e2e8f0; --code-bg: #0f172a; --code-border: #1e293b; --code-muted: #64748b; --code-keyword: #c4b5fd; --code-string: #86efac; --code-number: #fdba74; --code-function: #7dd3fc; --code-type: #fde68a; --code-variable: #f9a8d4; --code-deleted: #fca5a5; } /* The language picker in a block's corner. It is real DOM inside the 
       (so it travels with the block) but it is NOT part of the note -- the editor
   strips it back out on save. Deliberately quiet until hovered: a code block
   in a note is usually being read, not relabelled. */
.rich-editor-content pre {
  position: relative !important;
  padding-top: 1.75rem !important;
}

.rich-editor-content pre > .code-block-language {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--code-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  /* The caret must never end up in here, and a drag across the block must not
     select it as if it were code. */
  user-select: none;
  -webkit-user-select: none;
}

.rich-editor-content pre:hover > .code-block-language,
.rich-editor-content pre > .code-block-language:focus {
  opacity: 1;
  color: var(--code-fg);
  border-color: var(--code-border);
}

/* Touch has no hover, so on a phone the picker is simply always legible --
   which is also what it needs to be inside the native app. */
@media (hover: none) {
  .rich-editor-content pre > .code-block-language { opacity: 1; }
}

.rich-editor-content pre .hljs-comment,
.rich-editor-content pre .hljs-quote,
.action-text-content pre .hljs-comment,
.action-text-content pre .hljs-quote { color: var(--code-muted); font-style: italic; }

.rich-editor-content pre .hljs-keyword,
.rich-editor-content pre .hljs-selector-tag,
.rich-editor-content pre .hljs-literal,
.rich-editor-content pre .hljs-doctag,
.rich-editor-content pre .hljs-meta .hljs-keyword,
.action-text-content pre .hljs-keyword,
.action-text-content pre .hljs-selector-tag,
.action-text-content pre .hljs-literal,
.action-text-content pre .hljs-doctag { color: var(--code-keyword); }

.rich-editor-content pre .hljs-string,
.rich-editor-content pre .hljs-regexp,
.rich-editor-content pre .hljs-addition,
.rich-editor-content pre .hljs-attribute,
.rich-editor-content pre .hljs-meta .hljs-string,
.action-text-content pre .hljs-string,
.action-text-content pre .hljs-regexp,
.action-text-content pre .hljs-addition,
.action-text-content pre .hljs-attribute { color: var(--code-string); }

.rich-editor-content pre .hljs-number,
.rich-editor-content pre .hljs-symbol,
.rich-editor-content pre .hljs-bullet,
.rich-editor-content pre .hljs-link,
.action-text-content pre .hljs-number,
.action-text-content pre .hljs-symbol,
.action-text-content pre .hljs-bullet,
.action-text-content pre .hljs-link { color: var(--code-number); }

.rich-editor-content pre .hljs-title,
.rich-editor-content pre .hljs-section,
.rich-editor-content pre .hljs-title\.function_,
.rich-editor-content pre .hljs-selector-id,
.action-text-content pre .hljs-title,
.action-text-content pre .hljs-section,
.action-text-content pre .hljs-title\.function_,
.action-text-content pre .hljs-selector-id { color: var(--code-function); }

.rich-editor-content pre .hljs-type,
.rich-editor-content pre .hljs-class .hljs-title,
.rich-editor-content pre .hljs-title\.class_,
.rich-editor-content pre .hljs-built_in,
.rich-editor-content pre .hljs-selector-class,
.action-text-content pre .hljs-type,
.action-text-content pre .hljs-title\.class_,
.action-text-content pre .hljs-built_in,
.action-text-content pre .hljs-selector-class { color: var(--code-type); }

.rich-editor-content pre .hljs-variable,
.rich-editor-content pre .hljs-template-variable,
.rich-editor-content pre .hljs-params,
.rich-editor-content pre .hljs-attr,
.rich-editor-content pre .hljs-property,
.action-text-content pre .hljs-variable,
.action-text-content pre .hljs-template-variable,
.action-text-content pre .hljs-params,
.action-text-content pre .hljs-attr,
.action-text-content pre .hljs-property { color: var(--code-variable); }

.rich-editor-content pre .hljs-deletion,
.action-text-content pre .hljs-deletion { color: var(--code-deleted); }

.rich-editor-content pre .hljs-emphasis,
.action-text-content pre .hljs-emphasis { font-style: italic; }

.rich-editor-content pre .hljs-strong,
.action-text-content pre .hljs-strong { font-weight: 600; }

/* The  inside carries the language and (once highlighting lands) the
   colours; the 
     around it owns the chrome. Anything that would make the
   inner element look like a separate inline chip has to come back off, since
   the inline-code rules further down would otherwise apply to it too. */
.rich-editor-content pre > code,
.action-text-content pre > code {
  display: block !important;
  /* An empty code block has to keep a line box, or there is nowhere for the
     caret to go. Without this the browser has no box to put it in and silently
     snaps it to the nearest rendered content -- the paragraph AFTER the block --
     so a fence you just opened cannot be typed into at all.

     Deliberately unconditional rather than scoped to :empty. Deleting a block's
     last character leaves a stray 
     behind, which means the element still
     has a child and :empty stops matching at exactly the moment the box is
     needed again. One line's height is never more than a block with content in
     it already has, so this costs nothing anywhere else.

     `lh` is one line of THIS element's line-height, so the block does not
     change size when its first character arrives. The em value above it is the
     fallback for anything that does not know the unit. */
  min-height: 1.5em !important;
  min-height: 1lh !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  white-space: inherit !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 
  •  — there is no  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-top and margin-bottom match the editor, where .rich-editor-content ul.contains-task-list
   has 0.75rem top and bottom margins so a saved checklist aligns identically to the editor. */
.action-text-content ul:has(li[aria-checked]) {
  list-style: none !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !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 
     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;
}

/* Colours come from the variables declared with the other code-block rules
   above, NOT from literals: a theme redefines those variables, and a literal
   here would quietly win over every theme because it comes later in the file. */
.rich-editor-content pre {
  background-color: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 0.75rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
  overflow-x: auto !important;
}

/* Toolbar's horizontalRule() emits an 
    ; 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 
    -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-top: 0.75rem !important;
    margin-left: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    padding-left: 0.25rem !important;
  }

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

  li {
    margin-bottom: 0.375rem !important;
    line-height: 1.65 !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;
  }

  /* Same story as the editor's copy: variables, so a theme reaches this too. */
  pre {
    background-color: var(--code-bg) !important;
    border: 1px solid var(--code-border) !important;
    border-radius: 0.75rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1.25rem !important;
    overflow-x: auto !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