[x-cloak] { display: none !important; }

/* <template> elements are inert and must never render — but daisyUI 5's
   menu styles every direct child of a menu <li> as a row (display: grid +
   padding), which overrides the browser's built-in template{display:none}.
   Alpine keeps its raw x-if/x-for <template>s in place in the live DOM
   (that's how it works), so inside the document tree's <li>s they were
   getting painted as EMPTY menu rows (the "empty gray bars" bug,
   docs/adr/0025 addendum). Re-assert the invariant globally. */
template { display: none !important; }

body { font-family: 'Newsreader', Georgia, serif; font-weight: 300; }

/* github-markdown-css sets an opaque white background + dark text by
   default; override both so markdown cells sit on the epicures theme
   instead of looking like a pasted-in white box. */
.markdown-body {
  background-color: transparent !important;
  color: inherit !important;
}

.markdown-body ul {
  list-style-type: disc !important;
  margin-left: 1.5rem !important;
  padding-left: 0 !important;
}

.markdown-body ol {
  list-style-type: decimal !important;
  margin-left: 1.5rem !important;
  padding-left: 0 !important;
}

/* Nested lists */
.markdown-body ul ul,
.markdown-body ol ol,
.markdown-body ul ol,
.markdown-body ol ul {
  margin-left: 1.25rem !important;
  list-style-type: circle !important;
}

[data-theme="epicures"] {
  color-scheme: light;
  --color-base-100: #fefcf3;
  --color-base-200: #f7f3e4;
  --color-base-300: #ece6d0;
  --color-base-content: #1c1a14;
  --color-primary: #0d6e6e;
  --color-primary-content: #fdfcf7;
  --color-secondary: #5a6b5a;
  --color-secondary-content: #fdfcf7;
  --color-accent: #094646;
  --color-accent-content: #fdfcf7;
  --color-neutral: #2c3320;
  --color-neutral-content: #fdfcf7;
  --color-info: oklch(71% 0.143 215.221);
  --color-info-content: oklch(98% 0.019 200.873);
  --color-success: oklch(70% 0.14 182.503);
  --color-success-content: oklch(98% 0.014 180.72);
  --color-warning: oklch(70% 0.213 47.604);
  --color-warning-content: oklch(98% 0.016 73.684);
  --color-error: oklch(63% 0.237 25.331);
  --color-error-content: oklch(97% 0.013 17.38);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --border: 1px;
  --depth: 0;
  --noise: 1;
}

/* The same paper at night (Bo).

   Not an inversion: an inverted cream is a grey that looks broken. The
   ground is a warm near-black with the same hint of green the light
   theme has, the text is the paper colour rather than white, and the
   teal is lifted because a dark ground eats saturation. What stays the
   same is the shape of it — the same radii, the same border, the same
   flatness. */
[data-theme="epicures-night"] {
  color-scheme: dark;
  --color-base-100: #16150f;
  --color-base-200: #1e1d15;
  --color-base-300: #2b291e;
  --color-base-content: #ece6d0;
  --color-primary: #4fb3a8;
  --color-primary-content: #10201e;
  --color-secondary: #8fa08c;
  --color-secondary-content: #12160f;
  --color-accent: #7fd0c4;
  --color-accent-content: #0c1c1a;
  --color-neutral: #d8d2bc;
  --color-neutral-content: #16150f;
  --color-info: oklch(78% 0.12 215.221);
  --color-info-content: oklch(20% 0.02 200.873);
  --color-success: oklch(78% 0.12 182.503);
  --color-success-content: oklch(20% 0.02 180.72);
  --color-warning: oklch(80% 0.16 47.604);
  --color-warning-content: oklch(22% 0.03 73.684);
  --color-error: oklch(72% 0.19 25.331);
  --color-error-content: oklch(20% 0.02 17.38);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --border: 1px;
  --depth: 0;
  --noise: 1;
}

/* Two stylesheets from a CDN assume a white page and say so in their
   own variables. Told once here, rather than fought with `!important`
   in twenty places. */
[data-theme="epicures-night"] .markdown-body {
  --color-canvas-default: transparent;
  --color-canvas-subtle: var(--color-base-200);
  --color-fg-default: var(--color-base-content);
  --color-fg-muted: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  --color-border-default: var(--color-base-300);
  --color-border-muted: var(--color-base-300);
}

/* The rich editor is a third-party widget with a white chrome of its
   own. Its own dark theme is a separate stylesheet we do not load, so
   the frame is dressed here and the text inside it inherits. */
[data-theme="epicures-night"] .toastui-editor-defaultUI,
[data-theme="epicures-night"] .toastui-editor-defaultUI-toolbar,
[data-theme="epicures-night"] .toastui-editor-toolbar,
[data-theme="epicures-night"] .toastui-editor-md-container,
[data-theme="epicures-night"] .toastui-editor-ww-container,
[data-theme="epicures-night"] .toastui-editor-popup,
[data-theme="epicures-night"] .toastui-editor-context-menu {
  background-color: var(--color-base-100) !important;
  border-color: var(--color-base-300) !important;
  color: var(--color-base-content) !important;
}

[data-theme="epicures-night"] .toastui-editor-contents,
[data-theme="epicures-night"] .toastui-editor-md-preview,
[data-theme="epicures-night"] .ProseMirror {
  background-color: transparent !important;
  color: var(--color-base-content) !important;
}

/* Its toolbar icons are a black sprite. Lightened rather than replaced:
   a sprite we do not own is not a sprite to redraw. */
[data-theme="epicures-night"] .toastui-editor-toolbar-icons {
  filter: invert(88%);
}

/* The rich editor's custom widget popup (frontend/js/markdown-cell.js):
   Toast UI computes its inline `left` off the default popup width and
   throws it off-screen for a right-side toolbar button — right-align it
   instead. `!important` because the broken value is an inline style. */
.toastui-editor-popup:has(.loci-widget-popup) {
  left: auto !important;
  right: 8px !important;
}

/* A component that has to lay itself out inside its parent's flex
   column. A custom element is `display: inline` until something says
   otherwise, so `<ui-bundle-picker>` sat between the flex container and
   the flex child and neither of them could see the other: the picker
   took its natural height, overflowed the box it was given, and its
   footer landed on top of the row below.

   `contents` removes the wrapper from layout and leaves its child in
   the parent's flow, which is exactly what a component that IS its
   root div wants. */
ui-bundle-picker { display: contents; }


/* The stretch a copy-editor proposal would replace, lit up in the
   paragraph while its row is hovered (frontend/js/copy-editor.js). The
   Highlight API paints without touching the DOM; the <mark> is the
   fallback where a browser has no such API. */
::highlight(copy-edit),
mark[data-copy-edit] {
  background-color: rgba(250, 204, 21, 0.35);
  color: inherit;
}


/* A card's tooltips hang from the CARD rather than from the button
   they belong to (Bo, 2026-09-09; the Find card the same way,
   2026-09-22).

   Buttons in a narrow column: a bubble centred on the last one runs
   off the panel, and daisyUI's own tooltip-start only moves the
   problem, since it aligns with the button and the last button is
   already at the right edge. Marking the row that spans the card
   makes it the positioned ancestor, and the buttons static, so every
   bubble resolves against that row instead — each one starts at the
   card's left edge with the full width to wrap in. Its tail would
   point at the wrong button, so there is none.

   A descendant selector, not a child one: in the Find card the
   buttons sit in a group of their own beside the title, and the row
   that spans the card is one level up. */
.card-tips { position: relative; }
.card-tips .tooltip { position: static; }
.card-tips .tooltip[data-tip]:before {
  --tt-trans: 0;
  inset-inline: 0 auto;
  max-width: 100%;
  text-align: left;
}
.card-tips .tooltip:after { display: none; }