/* 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); }