/* ============================================
   Analyzing Islam — Highlights
   Side card + floating colour-picker toolbar + <mark> styling.
   ============================================ */

/* ---------- The painted highlight itself ---------- */
mark.ai-hl {
  background-color: #b8860b;
  color: #ffffff;
  padding: 0 1px;
  border-radius: 2px;
  /* No mix-blend-mode: with dark stock colours over white text we want
     the colour to render solidly so the text stays legible. */
  cursor: pointer;
  transition: outline-color 0.15s, box-shadow 0.15s;
}
mark.ai-hl.is-flash {
  outline: 2px solid var(--accent, #ff8a4a);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 138, 74, 0.18);
}

/* ---------- Floating selection toolbar ---------- */
.ai-hl-toolbar {
  position: absolute;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--panel, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--sans, system-ui);
}
.ai-hl-toolbar[hidden] { display: none; }
.ai-hl-swatches {
  display: flex;
  gap: 4px;
}
.ai-hl-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.ai-hl-swatch:hover { transform: scale(1.15); border-color: #fff; }
.ai-hl-custom {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  margin-left: 2px;
}
.ai-hl-custom-label {
  font-size: 14px;
  color: var(--text-muted, #999);
  line-height: 1;
  pointer-events: none;
}
.ai-hl-color-input {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.ai-hl-remove {
  margin-left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1e1e1e;
  border: 1.5px solid #666;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-size: 0;
  flex-shrink: 0;
}
.ai-hl-remove::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: calc(50% - 1.5px);
  height: 3px;
  background: #c0392b;
  transform: rotate(-45deg);
}
.ai-hl-remove:hover { border-color: #c0392b; }

/* ---------- Side card on reader pages ---------- */
.hl-card {
  position: sticky;
  top: 90px;
  align-self: start;
  height: calc(100vh - 90px);
  max-height: calc(100vh - 90px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 24px 20px;
  border-left: 1px solid var(--border, #2a2a2a);
  font-family: var(--sans, system-ui);
  font-size: 13px;
  box-sizing: border-box;
}
.hl-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}
.hl-card-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-dim, #777);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-left: auto;
}
.hl-card-close:hover { color: var(--text, #eee); }

.hl-card.is-dismissed { display: none; }

.hl-card.is-collapsed .hl-card-list,
.hl-card.is-collapsed .hl-card-empty { display: none; }
.hl-card.is-collapsed {
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.hl-card.is-collapsed .hl-card-head {
  cursor: pointer;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Reader / bible layout: collapse grid column to header width when card closes */
.reader-layout.has-hl-card:has(> .hl-card.is-collapsed) {
  grid-template-columns:
    var(--reader-toc-w, 260px)
    10px
    minmax(0, 1fr)
    10px
    max-content;
}
.bible-layout.has-hl-card:has(> .hl-card.is-collapsed) {
  grid-template-columns: 240px minmax(0, 1fr) 10px max-content;
}
.reader-layout.has-hl-card:has(> .hl-card.is-collapsed) > .splitter[data-splitter-key="reader-hl"],
.bible-layout.has-hl-card:has(> .hl-card.is-collapsed) > .splitter[data-splitter-key="reader-hl"] {
  display: none;
}

.hl-card-head h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-dim, #777);
  font-weight: 600;
  margin: 0;
}
.hl-card-count {
  font-size: 11px;
  color: var(--text-muted, #999);
  background: var(--panel-2, #222);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.hl-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover, #444) transparent;
}
.hl-card-list::-webkit-scrollbar       { width: 6px; }
.hl-card-list::-webkit-scrollbar-thumb { background: var(--border-hover, #444); }
.hl-card-list::-webkit-scrollbar-track { background: transparent; }

.hl-card-item {
  display: grid;
  grid-template-columns: 14px 1fr 22px 22px;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}
.hl-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
}
.hl-snippet {
  color: var(--text, #eee);
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
}
.hl-snippet:hover { color: var(--accent, #ff8a4a); }
.hl-color {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border, #2a2a2a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}
.hl-color::before {
  content: "🎨";
  font-size: 11px;
  opacity: 0.55;
}
.hl-color-input {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.hl-delete {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border, #2a2a2a);
  background: transparent;
  color: var(--text-muted, #999);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.hl-delete:hover { color: #ff6b6b; border-color: #ff6b6b; }
.hl-card-empty {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-dim, #777);
  font-style: italic;
}

/* ---------- Reader layout: 5-column variant (TOC | split | main | split | hl) ---------- */
.reader-layout.has-hl-card {
  grid-template-columns:
    var(--reader-toc-w, 260px)
    10px
    minmax(0, 1fr)
    10px
    var(--reader-hl-w, 240px);
}
/* Collapsing the right splitter to 0 gives the reading column full width. */

/* When the right splitter collapses the highlights card to 0 we hide
   the card, identical to how the left TOC handles its splitter. */
.reader-layout.has-hl-card:has(> .splitter[data-splitter-key="reader-hl"].is-collapsed) > .hl-card {
  padding-left: 0;
  padding-right: 0;
  visibility: hidden;
  width: 0;
  min-width: 0;
  border-left: 0;
}

/* Right-side splitter mirrors the left one but anchors to the next
   sibling. The expand button sits on the LEFT face of the splitter. */
.reader-layout > .splitter[data-splitter-side="right"] .splitter-expand {
  /* Flip the chevron so the arrow points LEFT (= expand the right pane). */
  transform: translateX(-50%) scaleX(-1);
}

/* Bible interlinear uses .bible-layout (TOC + main, 2-col). Extend to
   4-col when the highlights card is present (TOC | main | splitter | hl). */
.bible-layout.has-hl-card {
  grid-template-columns: 240px minmax(0, 1fr) 10px var(--reader-hl-w, 280px);
}
.bible-layout.has-hl-card:has(> .splitter[data-splitter-key="reader-hl"].is-collapsed) > .hl-card {
  padding-left: 0;
  padding-right: 0;
  visibility: hidden;
  width: 0;
  min-width: 0;
  border-left: 0;
}
.bible-layout > .splitter {
  position: sticky;
  top: 90px;
  align-self: start;
  height: calc(100vh - 90px);
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 2;
}
.bible-layout > .splitter::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border, #2a2a2a);
  pointer-events: none;
  transition: background 0.15s, width 0.15s;
}
.bible-layout > .splitter:hover::before,
.bible-layout > .splitter.is-dragging::before {
  background: var(--accent, #ff8a4a);
  width: 3px;
}

/* Floating variant for readers that don't have a grid layout (e.g.
   Ibn-Kathir per-surah pages with .ibnk-wrap). The card pins to the
   right edge of the viewport without disturbing the article column. */
.hl-card--floating {
  position: fixed;
  top: 80px;
  right: 16px;
  width: var(--reader-hl-w, 280px);
  height: calc(100vh - 110px);
  max-height: calc(100vh - 110px);
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  padding: 16px 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  z-index: 40;
}
@media (max-width: 1280px) {
  /* On narrower screens the floating card collides with the article
     column — fall back to the same drawer behaviour as grid layouts. */
  .hl-card--floating {
    transform: translateX(110%);
    transition: transform 0.18s ease-out;
    border-radius: 8px 0 0 8px;
    right: 0;
  }
  .hl-card--floating.is-open { transform: translateX(0); }
}

@media (max-width: 1100px) {
  /* Collapse the right card into a slide-in drawer below 1100px. */
  .reader-layout.has-hl-card {
    grid-template-columns:
      var(--reader-toc-w, 260px)
      10px
      minmax(0, 1fr);
  }
  /* Bible layout: drop the hl-card column; card becomes a fixed drawer. */
  .bible-layout.has-hl-card {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .bible-layout.has-hl-card > .splitter[data-splitter-key="reader-hl"] { display: none; }
  /* Highlights card and toggle are hidden on mobile — use the selection
     toolbar (with the red-stripe remove circle) to manage highlights instead. */
  .hl-card,
  .hl-card.is-open,
  .hl-card.is-dismissed { display: none !important; }
  .hl-card-toggle { display: none !important; }
}
@media (min-width: 1101px) {
  .hl-card-toggle { display: none; }
}

/* ===== Mobile reader: single-column, full-width content ===== */
@media (max-width: 960px) {
  /* Bible layout: collapse to single column on phones. */
  .bible-layout.has-hl-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  /* Override the 1100px rule above — has-hl-card must not force 3 columns
     on phones where reader.css collapses the grid to a single column. */
  .reader-layout.has-hl-card {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  /* TOC sits above the content as a compact scrollable strip */
  .reader-layout.has-hl-card .reader-toc {
    overflow-y: auto;
  }
  /* Highlights toggle stays fixed top-right while the user scrolls.
     Mobile nav wraps to ~109px on narrow phones; 115px clears it.
     z-index 105 (> nav's 100) ensures it's tappable even if the nav
     is slightly taller (e.g. when the auth button adds another row). */
  .hl-card-toggle {
    position: fixed;
    top: 115px;
    right: 12px;
    z-index: 105;
  }
}

/* ---------- Embed mode (compare / build iframes): hide reader's own panel ---------- */
html.embed-mode .hl-card,
body.embed-mode .hl-card,
html.embed-mode .hl-card-toggle,
body.embed-mode .hl-card-toggle,
html.embed-mode .splitter[data-splitter-key="reader-hl"],
body.embed-mode .splitter[data-splitter-key="reader-hl"] { display: none !important; }

/* compare/build (hl-in-compare): show the HL card and splitter on all sizes.
   Desktop: side panel in grid (no TOC). Mobile: slide-in drawer + toggle. */
html.embed-mode.hl-in-compare .hl-card,
body.embed-mode.hl-in-compare .hl-card {
  display: flex !important;
  top: 0;
  height: 100vh;
  max-height: 100vh;
}
html.embed-mode.hl-in-compare .hl-card.is-dismissed,
body.embed-mode.hl-in-compare .hl-card.is-dismissed { display: none !important; }
html.embed-mode.hl-in-compare .hl-card-toggle,
body.embed-mode.hl-in-compare .hl-card-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1000;
}
html.embed-mode.hl-in-compare .splitter[data-splitter-key="reader-hl"],
body.embed-mode.hl-in-compare .splitter[data-splitter-key="reader-hl"] {
  display: block !important;
}
/* Desktop: compact 2-col layout — content fills left, HL panel on right. */
html.embed-mode.hl-in-compare .reader-layout.has-hl-card,
body.embed-mode.hl-in-compare .reader-layout.has-hl-card {
  grid-template-columns: minmax(0, 1fr) 10px var(--reader-hl-w, 240px) !important;
}
/* Hide the TOC and its splitter — not useful inside a compare pane. */
html.embed-mode.hl-in-compare .reader-toc,
body.embed-mode.hl-in-compare .reader-toc,
html.embed-mode.hl-in-compare .splitter[data-splitter-key="reader-toc"],
body.embed-mode.hl-in-compare .splitter[data-splitter-key="reader-toc"] {
  display: none !important;
}
/* Mobile (≤1100px): hide card and toggle everywhere including compare/build iframes. */
@media (max-width: 1100px) {
  html.embed-mode.hl-in-compare .hl-card,
  body.embed-mode.hl-in-compare .hl-card,
  html.embed-mode.hl-in-compare .hl-card.is-open,
  body.embed-mode.hl-in-compare .hl-card.is-open { display: none !important; }
  html.embed-mode.hl-in-compare .hl-card-toggle,
  body.embed-mode.hl-in-compare .hl-card-toggle { display: none !important; }
  html.embed-mode.hl-in-compare .reader-layout.has-hl-card,
  body.embed-mode.hl-in-compare .reader-layout.has-hl-card {
    grid-template-columns: 1fr !important;
  }
}
html.embed-mode .reader-layout.has-hl-card,
body.embed-mode .reader-layout.has-hl-card {
  grid-template-columns: var(--reader-toc-w, 260px) 10px minmax(0, 1fr) !important;
}
html.embed-mode .bible-layout.has-hl-card,
body.embed-mode .bible-layout.has-hl-card {
  grid-template-columns: 240px minmax(0, 1fr) !important;
}

/* ---------- Mobile: fix embed-mode reader layout inside iframes ---------- */
/* The embed-mode !important rule above forces 3-column layout even on phones.
   Override at ≤900px so content inside compare/build iframes flows single-column. */
@media (max-width: 900px) {
  html.embed-mode .reader-layout.has-hl-card,
  body.embed-mode .reader-layout.has-hl-card {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
  }
  html.embed-mode .bible-layout.has-hl-card,
  body.embed-mode .bible-layout.has-hl-card {
    grid-template-columns: 1fr !important;
  }
}