/* Kavvi explanation page (explainpage-20261013) - see kv-reader-20261013.js. Prefix kvrd.
   The page's own sheets load lazily after this one, so the rules that restyle the app win on specificity
   (html …), never on order. Colours are the app's own tokens, so light and dark both follow the theme. */

:root { --kvrd-w: clamp(360px, 40vw, 680px); --kvrd-nav-h: 60px; }

/* ------------------------------------------------------------ split view */
.kvrd-pane, .kvrd-bar, .kvrd-launch, .kvrd-full { font-family: var(--kvrd-font, inherit); }
html.kvrd-split .kv-app-shell .study-layout.session-page { padding-left: 0; padding-right: var(--kvrd-w); box-sizing: border-box; }
html.kvrd-split.kvrd-left .kv-app-shell .study-layout.session-page { padding-right: 0; padding-left: var(--kvrd-w); }
/* the navbar spans the column beside the pane instead of the whole viewport */
html.kvrd-split .kv-app-shell .session-page .sn {
  margin-inline: calc(50% - (100vw - var(--kvrd-w)) / 2);
  padding-inline: max(var(--kv-6, 24px), calc((100vw - var(--kvrd-w)) / 2 - 560px));
}
html.kvrd-dragging, html.kvrd-dragging * { cursor: col-resize !important; user-select: none !important; }

.kvrd-pane {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 61;
  width: var(--kvrd-w); display: none; flex-direction: column; box-sizing: border-box;
  background: var(--kv-card-raised, #fff); color: var(--kv-text, #182c25);
  border-left: 1px solid var(--kv-line, rgba(0,0,0,.09));
}
html.kvrd-split:not(.kvrd-full-on) .kvrd-pane { display: flex; }
html.kvrd-split.kvrd-left .kvrd-pane { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--kv-line, rgba(0,0,0,.09)); }

.kvrd-head {
  height: var(--kvrd-nav-h); flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 16px; box-sizing: border-box; border-bottom: 1px solid var(--kv-line, rgba(0,0,0,.09));
}
.kvrd-pane[dir=rtl] .kvrd-head { padding: 0 16px 0 10px; }
.kvrd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.kvrd-nav { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.kvrd-count { min-width: 64px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--kv-text-2, #303530); opacity: .85; }
.kvrd-btn {
  appearance: none; border: 0; margin: 0; padding: 0; width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  display: inline-grid; place-items: center; background: transparent; color: inherit; cursor: pointer;
}
.kvrd-btn::after { content: none !important; }
.kvrd-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--kv-text, #182c25) 8%, transparent); }
.kvrd-btn:disabled { opacity: .3; cursor: default; }
.kvrd-btn:focus-visible, .kvrd-follow:focus-visible, .kvrd-strip button:focus-visible, .kvrd-launch:focus-visible, .kvrd-bar-open:focus-visible {
  outline: 2px solid var(--kv-accent-fill, #1f5a42); outline-offset: 2px;
}
[dir=rtl] .kvrd-prev svg, [dir=rtl] .kvrd-next svg { transform: scaleX(-1); }

.kvrd-follow {
  appearance: none; border: 1px solid var(--kv-line, rgba(0,0,0,.09)); background: transparent; color: var(--kv-text-2, #303530);
  height: 28px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: default; flex: 0 0 auto; white-space: nowrap;
}
.kvrd-follow i { width: 6px; height: 6px; border-radius: 50%; background: var(--kv-accent-fill, #1f5a42); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 22%, transparent); }
.kvrd-follow.is-manual { cursor: pointer; color: var(--kv-accent-fill, #1f5a42); border-color: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 45%, transparent); }
.kvrd-follow.is-manual i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.kvrd-stage {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: center;
  background: color-mix(in srgb, var(--kv-text, #182c25) 5%, var(--kv-card-raised, #fff));
  cursor: zoom-in;
}
.kvrd-img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - var(--kvrd-nav-h) - 52px - 36px);
  object-fit: contain; background: #fff; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.12);
}
.kvrd-img:not([src]), .kvrd-thumb img:not([src]), .kvrd-full-stage img:not([src]) { visibility: hidden; }

.kvrd-strip {
  flex: 0 0 52px; display: flex; align-items: center; gap: 4px; padding: 0 12px; box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-top: 1px solid var(--kv-line, rgba(0,0,0,.09));
}
.kvrd-strip button {
  appearance: none; flex: 0 0 auto; position: relative; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px;
  border: 0; background: transparent; color: var(--kv-text-2, #303530); font: inherit; font-size: 12.5px;
  font-variant-numeric: tabular-nums; cursor: pointer; opacity: .62;
}
.kvrd-strip button::after { content: none !important; }
.kvrd-strip button.is-cited { opacity: 1; font-weight: 600; }
.kvrd-strip button.is-cited::before {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--kv-accent-fill, #1f5a42);
}
.kvrd-strip button:hover { background: color-mix(in srgb, var(--kv-text, #182c25) 8%, transparent); }
.kvrd-strip button.is-current { opacity: 1; background: var(--kv-accent-fill, #1f5a42); color: var(--kv-card-raised, #fff); font-weight: 700; }
.kvrd-strip button.is-current::before { background: currentColor; }

.kvrd-grip { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; z-index: 2; touch-action: none; }
.kvrd-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
.kvrd-grip:hover::after, .kvrd-grip:focus-visible::after, html.kvrd-dragging .kvrd-grip::after { background: var(--kv-accent-fill, #1f5a42); }
.kvrd-grip:focus-visible { outline: none; }
html.kvrd-left .kvrd-grip { left: auto; right: -5px; }

/* put away: a quiet pill under the navbar */
.kvrd-launch {
  position: fixed; top: calc(var(--kvrd-nav-h) + 12px); right: 16px; z-index: 55; display: none;
  appearance: none; border: 1px solid var(--kv-line, rgba(0,0,0,.09)); border-radius: 999px; height: 34px; padding: 0 14px;
  align-items: center; gap: 7px; background: var(--kv-card-raised, #fff); color: var(--kv-text, #182c25);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.kvrd-launch::after { content: none !important; }
.kvrd-launch.is-on { display: inline-flex; }
.kvrd-launch.is-left { right: auto; left: 16px; }
html.kvrd-full-on .kvrd-launch { display: none; }

/* ------------------------------------------------------------- phone bar */
.kvrd-bar {
  position: fixed; left: 0; right: 0; top: var(--kvrd-nav-h); z-index: 59; height: 58px; display: none;
  align-items: center; gap: 2px; padding: 0 8px 0 12px; box-sizing: border-box;
  background: var(--kv-card-raised, #fff); color: var(--kv-text, #182c25);
  border-bottom: 1px solid var(--kv-line, rgba(0,0,0,.09)); box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.kvrd-bar[dir=rtl] { padding: 0 12px 0 8px; }
html.kvrd-bar-on:not(.kvrd-full-on) .kvrd-bar { display: flex; }
html.kvrd-bar-on .kv-app-shell .session-page .session-scroll-content { padding-top: 58px; }
.kvrd-bar-open {
  appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
  flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 11px; padding: 0;
}
.kvrd-bar-open::after { content: none !important; }
.kvrd-thumb {
  flex: 0 0 auto; width: 34px; height: 44px; border-radius: 4px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--kv-line, rgba(0,0,0,.09)), 0 2px 6px rgba(0,0,0,.1);
}
.kvrd-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.kvrd-bar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kvrd-bar-text b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.kvrd-bar-text small { font-size: 12px; color: var(--kv-text-2, #303530); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kvrd-bar .kvrd-btn { width: 40px; height: 40px; border-radius: 12px; }

/* ----------------------------------------------------------- full screen */
.kvrd-full {
  position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column;
  background: rgba(12, 14, 13, .96); color: #f2f5f3;
}
html.kvrd-full-on .kvrd-full { display: flex; }
.kvrd-full-head {
  flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 8px 0 18px; padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
}
.kvrd-full[dir=rtl] .kvrd-full-head { padding: 0 18px 0 8px; }
.kvrd-full-count { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kvrd-full-nav { display: inline-flex; gap: 4px; }
.kvrd-full .kvrd-btn { width: 42px; height: 42px; border-radius: 12px; color: #f2f5f3; }
.kvrd-full .kvrd-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.kvrd-full-stage {
  flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center;
  padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch;
}
.kvrd-full-stage img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  background: #fff; border-radius: 4px; margin: auto;
}
html.kvrd-zoom .kvrd-full-stage { align-items: flex-start; justify-content: flex-start; }
html.kvrd-zoom .kvrd-full-stage img { max-width: none; max-height: none; width: 200%; margin: 0; }
@media (min-width: 1100px) { html.kvrd-zoom .kvrd-full-stage img { width: min(200%, 1800px); } }

/* ------------------------------------------------- page links "(p. N)" */
::highlight(kvrd-cite) {
  color: var(--kv-accent-fill, #1f5a42);
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
html.kvrd-cite-hover .session-reading-body { cursor: pointer; }

/* ------------------------------------- the player docked on the composer */
html.kvrd-docked div:has(> .read-aloud.is-sticky) {
  left: var(--kvrd-dock-left) !important;
  bottom: var(--kvrd-dock-bottom) !important;
  width: var(--kvrd-dock-width) !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
  z-index: 41 !important;
}
html.kvrd-docked .read-aloud.is-sticky {
  width: 100% !important; max-width: none !important; box-sizing: border-box; display: flex; justify-content: flex-start;
  border-radius: 16px 16px 0 0 !important; box-shadow: none !important;
  background: var(--kv-card-raised, #fff) !important;
  border: 1px solid var(--kv-line, rgba(0,0,0,.09)) !important; border-bottom: 0 !important;
  padding-inline: 12px !important;
}
html.kvrd-docked .read-aloud.is-sticky .read-aloud-slider { max-width: none !important; flex: 1 1 auto !important; }
html.kvrd-docked .kv-app-shell .session-composer .floating-composer {
  border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
  border-top-color: transparent !important;
}
html.kvrd-docked .kv-app-shell .session-page .session-scroll-content { padding-bottom: calc(var(--kvrd-dock-h, 0px) + 20px); }

/* the composer as an "Ask about this" pill until it is used */
@media (min-width: 761px) {
  html .kv-app-shell .session-composer:not(:focus-within) .session-composer-label { display: none; }
  html .kv-app-shell .session-composer:not(:focus-within) .floating-composer { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
}

/* split view: the composer stays inside its column */
html.kvrd-split .kv-app-shell .session-composer { max-width: calc(100vw - var(--kvrd-w) - 48px); }
html.kvrd-split:not(.kvrd-left) .kv-app-shell .session-composer { right: var(--kvrd-w); }
html.kvrd-split.kvrd-left .kv-app-shell .session-composer { left: var(--kvrd-w); }

/* ------------------------------------------------------ reading polish */
html .kv-app-shell .session-reading-body .markdown-visual-block img {
  max-height: 380px; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; display: block;
}
html .kv-app-shell .session-reading-body .markdown-visual-block figcaption {
  font-size: 12.5px; text-align: center; opacity: .75;
}
html .kv-app-shell .session-reading-body .bidi-paragraph { margin-block: .55em .95em; }
html .kv-app-shell .session-reading-body .bidi-heading { margin-top: 1.9em; }

@media (prefers-reduced-motion: reduce) { .kvrd-grip::after { transition: none; } }

/* pagefix-20261013: loading and failure, over the page (never a bare green stage) */
.kvrd-stage, .kvrd-full-stage { position: relative; }
.kvrd-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--kv-card-raised, #fff); color: var(--kv-text, #182c25); box-shadow: 0 6px 24px rgba(0,0,0,.18);
  border: 1px solid var(--kv-line, rgba(0,0,0,.09)); z-index: 2;
}
.kvrd-full .kvrd-msg { background: #1b1f1d; color: #f2f5f3; border-color: rgba(255,255,255,.12); }
.is-loading > .kvrd-msg, .is-failed > .kvrd-msg { display: inline-flex; }
.is-loading > img { opacity: .45; transition: opacity .2s; }
.kvrd-msg i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kvrd-spin .8s linear infinite; opacity: .7; }
.is-failed > .kvrd-msg i { display: none; }
.kvrd-msg button {
  display: none; appearance: none; border: 0; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
  background: var(--kv-accent-fill, #1f5a42); color: var(--kv-card-raised, #fff);
}
.kvrd-msg button::after { content: none !important; }
.is-failed > .kvrd-msg button { display: inline-block; }
@keyframes kvrd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kvrd-msg i { animation: none; } }