/* Reader widget base styles (theme tokens friendly) */

.chapter-reader { margin: 10px 0 16px; }
.reader-bar { display:flex; flex-direction:column; gap:10px; }

.reader-toggle { align-self:flex-start; }

.reader-panel{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}

.reader-panel .rp-row{
  display:grid;
  grid-template-columns: 160px 1fr auto;
  align-items:center;
  gap:12px;
  margin: 8px 0;
}
.reader-panel .rp-lab{ font-weight:800; color: var(--muted); }

.reader-panel .rp-controls{ display:flex; gap:8px; align-items:center; }
.reader-panel .rp-val{ min-width:48px; text-align:right; color:var(--muted); }

/* Target controlled by widget */
[data-reader-target]{
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- Controls ---------- */

/* consistent select look */
.reader-panel select.select{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--input-brd, var(--border));
  background: var(--input-bg, var(--surface));
  color: var(--input-fg, var(--text));
  outline: none;
  transition: border-color var(--transition,.16s), box-shadow var(--transition,.16s);
}
.reader-panel select.select:focus{
  border-color: var(--input-focus, var(--accent, var(--btn-bg)));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-focus, var(--accent, var(--btn-bg))) 30%, transparent);
}

/* number buttons */
.reader-panel .button.small{ padding:4px 8px; min-height:28px; }

/* color */
.reader-panel input.color{
  width: 42px; height: 30px; padding: 0; border-radius: 8px;
  border:1px solid var(--border); background: var(--surface-2, var(--surface));
}

/* ---------- Range (base), theme vars will refine ---------- */

.reader-panel .range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--range-track, #d1d5db);
  outline: none;
  border: 1px solid var(--range-brd, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--range-brd, var(--border)) 30%, transparent);
}
.reader-panel .range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--range-thumb, var(--btn-bg));
  border: 1px solid var(--range-thumb-brd, transparent);
  box-shadow: var(--range-thumb-shadow, 0 2px 6px rgba(0,0,0,.2));
  cursor: pointer;
}
.reader-panel .range::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--range-thumb, var(--btn-bg));
  border: 1px solid var(--range-thumb-brd, transparent);
  box-shadow: var(--range-thumb-shadow, 0 2px 6px rgba(0,0,0,.2));
  cursor: pointer;
}
.reader-panel .range::-moz-range-track{
  height: 10px; border-radius: 999px; background: var(--range-track, #d1d5db);
  border: 1px solid var(--range-brd, var(--border));
}

/* --- enforce font for reading area --- */
[data-reader-target]{
  --reader-font: inherit;
}

/* Принудительно перекрываем любые внешние правила (кроме моно в code/pre) */
[data-reader-target].reader-override,
[data-reader-target].reader-override *:not(code):not(pre):not(kbd):not(samp){
  font-family: var(--reader-font) !important;
}

.reader-panel select.select{
  border:1px solid var(--input-brd); background:var(--input-bg); color:var(--input-fg);
}
.reader-panel select.select:focus{
  border-color:var(--input-focus);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--input-focus) 30%, transparent);
}
.reader-panel .range{
  background:var(--range-track); border:1px solid var(--range-brd);
}
.reader-panel .range::-webkit-slider-thumb{ background:var(--range-thumb); border-color:var(--range-thumb-brd); }
.reader-panel .range::-moz-range-thumb{ background:var(--range-thumb); border-color:var(--range-thumb-brd); }

/* ========================================================================
   CHAPTER NOTES — EDGE SAFE, THEME SAFE
   ======================================================================== */

.chapter-notes{
  --cn-accent: var(--brand, #7aa2ff);

  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 16px;

  /* железный фолбэк */
  background-color: var(--cn-panel);
  color: var(--cn-text);
  border: 1px solid var(--cn-border);

  /* красивая версия */
  border-color: color-mix(
    in srgb,
    var(--cn-accent) 22%,
    var(--cn-border)
  );

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cn-panel) 92%, transparent),
      color-mix(in srgb, var(--cn-panel) 84%, transparent)
    );

  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* Акценты */
.chapter-notes--before{
  --cn-accent: color-mix(in srgb, var(--brand,#7aa2ff) 80%, #22c55e 20%);
}
.chapter-notes--after{
  --cn-accent: color-mix(in srgb, var(--brand,#7aa2ff) 80%, #f59e0b 20%);
}

/* Текст */
.chapter-notes__title{
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 8px;
  font-size: .95rem;
  color: var(--cn-text);
  opacity: .95;
}

.chapter-notes__body{
  color: var(--cn-text);
}

.chapter-notes__body a{
  color: var(--cn-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chapter-notes__body blockquote{
  margin: .7em 0;
  padding: .2em 0 .2em 12px;
  border-left: 2px solid color-mix(
    in srgb,
    var(--cn-accent) 55%,
    transparent
  );
  color: color-mix(
    in srgb,
    var(--cn-text) 88%,
    var(--muted)
  );
}

/* кликабельность сносок в тексте главы и в примечаниях */
sup.q-footnote{
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
sup.q-footnote:focus{
  outline: 2px solid color-mix(in srgb, var(--brand,#7aa2ff) 55%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Footnotes dialog ===== */
.mf-footnote-dialog{
  width: min(560px, calc(100vw - 24px));
  max-width: 560px;
  border: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,.12)) 85%, transparent);
  border-radius: 18px;
  padding: 0;
  background: color-mix(in srgb, var(--panel, rgba(16,20,32,.92)) 94%, transparent);
  color: var(--text, #eaf0ff);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.mf-footnote-dialog::backdrop{
  background: rgba(0,0,0,.58);
}

.mf-footnote-dialog__form{ margin: 0; padding: 0; }

.mf-footnote-dialog__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,.12)) 85%, transparent);
}

.mf-footnote-dialog__title{
  font-weight: 800;
  letter-spacing: .2px;
}

.mf-footnote-dialog__close{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,.12)) 85%, transparent);
  background: transparent;
  color: var(--text, #eaf0ff);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
}

.mf-footnote-dialog__close:hover{
  background: color-mix(in srgb, var(--brand,#7aa2ff) 10%, transparent);
}

.mf-footnote-dialog__body{
  padding: 12px 14px 16px;
}

.mf-footnote-dialog__text{
  white-space: pre-wrap;
  color: var(--text, #eaf0ff);
  opacity: .95;
}

/* =========================
   MF FOOTNOTE DIALOG (center)
   ========================= */
dialog.mf-footnote-dialog{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;

  width: min(92vw, 640px);
  max-height: min(82vh, 620px);
  padding: 0;

  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,.12)) 85%, transparent);
  background: var(--panel, rgba(16,20,32,.96));
  color: var(--text, #eaf0ff);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  overflow: hidden;
}

dialog.mf-footnote-dialog::backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.mf-footnote-dialog__form{ margin:0; }

.mf-footnote-dialog__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,.12)) 75%, transparent);
}

.mf-footnote-dialog__title{
  font-weight: 800;
  letter-spacing: .2px;
}

.mf-footnote-dialog__close{
  appearance:none;
  border: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,.12)) 75%, transparent);
  background: color-mix(in srgb, var(--surface-1, rgba(255,255,255,.06)) 90%, transparent);
  color: inherit;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  line-height: 30px;
  font-size: 18px;
  cursor: pointer;
}

.mf-footnote-dialog__body{
  padding: 12px 14px 14px;
  overflow: auto;
  max-height: calc(min(82vh, 620px) - 58px);
}

.mf-footnote-dialog__text{
  white-space: pre-wrap;
}

/* ===== Footnotes dialog: close button mobile fix ===== */

.mf-footnote-dialog__head{
  /* чтобы кнопку не прижимало к краю на айфонах с вырезом */
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
  padding-left:  calc(14px + env(safe-area-inset-left,  0px));
}

.mf-footnote-dialog__close{
  /* нормальный тап-таргет */
  min-width: 44px;
  min-height: 44px;

  /* железное центрирование крестика */
  display: grid;
  place-items: center;

  padding: 0;
  line-height: 1;
  font-size: 22px;
  font-weight: 700;

  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 520px){
  .mf-footnote-dialog__close{
    min-width: 46px;
    min-height: 46px;
    font-size: 24px;
  }
}