/**
 * Redline by Bookcicle - Official Stylesheet (v1)
 * https://redline.bookcicle.com/styles/v1/redline.css
 *
 * Semantic, accessible styling for HTML document redlines.
 * You can link this stylesheet directly, bundle it, or override
 * individual selectors to match your application theme.
 */

:root {
  --bc-redline-ins-bg: rgba(34, 197, 94, 0.14);
  --bc-redline-ins-text: #14532d;
  --bc-redline-ins-border: #16a34a;
  --bc-redline-del-bg: rgba(239, 68, 68, 0.14);
  --bc-redline-del-text: #991b1b;
  --bc-redline-del-border: #dc2626;
  --bc-redline-font-family: inherit;
}

/* Explicit dark theme via class or data-attribute */
html[data-theme="dark"],
html.dark,
html.bc-theme-dark,
.dark {
  --bc-redline-ins-bg: rgba(34, 197, 94, 0.22);
  --bc-redline-ins-text: #4ade80;
  --bc-redline-ins-border: #22c55e;
  --bc-redline-del-bg: rgba(239, 68, 68, 0.22);
  --bc-redline-del-text: #f87171;
  --bc-redline-del-border: #ef4444;
}

/* System dark theme preference ONLY when not explicitly in light mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-product-vertical="redline"]) {
    --bc-redline-ins-bg: rgba(34, 197, 94, 0.22);
    --bc-redline-ins-text: #4ade80;
    --bc-redline-ins-border: #22c55e;
    --bc-redline-del-bg: rgba(239, 68, 68, 0.22);
    --bc-redline-del-text: #f87171;
    --bc-redline-del-border: #ef4444;
  }
}

/* Core semantic tags */
ins,
.bc-redline-ins {
  background-color: var(--bc-redline-ins-bg);
  color: var(--bc-redline-ins-text);
  text-decoration: none;
  border-bottom: 1.5px solid var(--bc-redline-ins-border);
  padding: 0.1em 0.25em;
  border-radius: 3px;
  font-weight: 600;
}

del,
.bc-redline-del {
  background-color: var(--bc-redline-del-bg);
  color: var(--bc-redline-del-text);
  text-decoration: line-through;
  text-decoration-color: var(--bc-redline-del-text);
  text-decoration-thickness: 1.5px;
  padding: 0.1em 0.25em;
  border-radius: 3px;
  opacity: 0.95;
}

/* Maintain heading typography when ins/del is nested inside headings */
:is(h1, h2, h3, h4, h5, h6) :is(ins, del, .bc-redline-ins, .bc-redline-del) {
  font-size: inherit;
  font-weight: inherit;
}

/* Block-level change groups */
.bc-redline-change-group {
  display: inline;
}

.bc-redline-change-group-block {
  display: block;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid #cbd5e1;
  border-radius: 4px;
  background-color: rgba(241, 245, 249, 0.5);
}

.bc-redline-change-group-block del {
  display: block;
  margin-bottom: 0.25rem;
}

.bc-redline-change-group-block ins {
  display: block;
}

.bc-redline-change-group-inline {
  display: inline;
}

/* Clean up whitespace handling inside code or pre elements */
pre ins, pre del, code ins, code del {
  padding: 0;
  border-radius: 0;
}

/* Block-level deletions and insertions:
   When del or ins wraps block elements (like li, div, p, blockquote, tr, table, headings)
   or is a direct child of a list container (ul, ol) or .json-doc, prevent the inline
   wrapper from generating empty inline boxes with padding/background (which render as
   ghost colored boxes / phantom newline bars). */
:is(del, ins, .bc-redline-del, .bc-redline-ins):has(> :is(li, div, p, blockquote, tr, table, h1, h2, h3, h4, h5, h6)),
:is(ul, ol, .json-doc) > :is(del, ins, .bc-redline-del, .bc-redline-ins) {
  display: contents;
  background: transparent;
  padding: 0;
  border: none;
}

:is(del, .bc-redline-del) > :is(li, div, p, blockquote, tr, h1, h2, h3, h4, h5, h6),
:is(ul, ol) > :is(del, .bc-redline-del) > li,
.json-doc > :is(del, .bc-redline-del) > .json-line {
  background-color: var(--bc-redline-del-bg);
  color: var(--bc-redline-del-text);
  text-decoration: line-through;
  text-decoration-color: var(--bc-redline-del-text);
  text-decoration-thickness: 1.5px;
  border-radius: 3px;
  opacity: 0.95;
}

:is(ins, .bc-redline-ins) > :is(li, div, p, blockquote, tr, h1, h2, h3, h4, h5, h6),
:is(ul, ol) > :is(ins, .bc-redline-ins) > li,
.json-doc > :is(ins, .bc-redline-ins) > .json-line {
  background-color: var(--bc-redline-ins-bg);
  color: var(--bc-redline-ins-text);
  text-decoration: none;
  border-bottom: 1.5px solid var(--bc-redline-ins-border);
  border-radius: 3px;
  font-weight: 600;
}