/* Cornello English — Чтение (library + reader). Everything is scoped under .v-read. */

.v-read [hidden] { display: none !important; }

/* ---------- library ---------- */
.v-read .rd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.v-read .rd-topic { width: auto; min-height: 34px; padding-block: 4px; }
.v-read .rd-group-title { margin-bottom: 10px; }
.v-read .rd-group + .rd-group { margin-top: 24px; }
.v-read .rd-continue { display: flex; flex-direction: column; gap: 6px; width: 100%; font: inherit; }
.v-read .rd-continue .progress { height: 6px; }
.v-read .rd-card { padding: 0; display: flex; flex-direction: column; }
.v-read .rd-card-main {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 1 1 auto; width: 100%;
  padding: 16px 18px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
  cursor: pointer; border-radius: var(--radius-lg);
}
.v-read .rd-card-main:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.v-read .rd-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v-read .rd-card-title { font: 650 1.2rem/1.25 var(--f-read); }
.v-read .rd-card-new { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.v-read .rd-card-prog { height: 5px; display: block; }
.v-read .rd-card-foot { padding: 0 10px 10px; display: flex; justify-content: flex-end; }
.v-read .rd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.v-read .rd-dot-good { background: var(--good); }
.v-read .rd-dot-blue { background: var(--blue); }
.v-read .rd-dot-warn { background: var(--warn); }
.v-read .rd-composer .rd-area { min-height: 180px; font-family: var(--f-read); font-size: 1.05rem; }
.v-read .rd-loading { display: flex; align-items: center; gap: 12px; padding: 60px 0; justify-content: center; }

/* ---------- reader: header ---------- */
.v-read .rd-top { margin-bottom: 8px; }
.v-read .rd-article {
  --rd-fs: 1.2rem; --rd-lh: 1.85;
  max-width: 720px; margin: 0 auto; min-width: 0;
}
.v-read .rd-article[data-fs="0"] { --rd-fs: 1.05rem; }
.v-read .rd-article[data-fs="2"] { --rd-fs: 1.4rem; }
.v-read .rd-article[data-lh="0"] { --rd-lh: 1.6; }
.v-read .rd-article[data-lh="2"] { --rd-lh: 2.1; }
.v-read .rd-article.has-gutter { padding-left: 40px; }
.v-read .rd-head { margin-bottom: 22px; }
.v-read .rd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.v-read .rd-title { font: 700 var(--t-xl)/1.18 var(--f-read); margin-top: 10px; overflow-wrap: anywhere; }
.v-read .rd-title-ru { margin-top: 4px; }
.v-read .rd-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; font-size: var(--t-sm); color: var(--ink-2); }
.v-read .rd-stat { display: inline-flex; align-items: center; gap: 6px; }
.v-read .rd-stat b { color: var(--ink); }
.v-read .rd-stat-new .rd-dot { background: var(--blue); }
.v-read .rd-stat-learn .rd-dot { background: var(--marker); }
.v-read .rd-stat-known .rd-dot { background: var(--good); }

/* ---------- reader: text ---------- */
.v-read .rd-text { position: relative; max-width: 65ch; }
.v-read .rd-text.en { font-size: var(--rd-fs); line-height: var(--rd-lh); }
.v-read .rd-para { margin-bottom: 1.1em; }
.v-read .rd-p { margin: 0; white-space: pre-line; overflow-wrap: break-word; }
.v-read .rd-sp {
  display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; padding: 0; margin-right: .1em;
  vertical-align: -.25em; border: 0; border-radius: 50%; background: none; color: var(--ink-3); opacity: .5; cursor: pointer;
}
.v-read .rd-sp:hover, .v-read .rd-sp:focus-visible { opacity: 1; color: var(--blue); background: var(--blue-soft); }
.v-read .rd-sp-float { position: absolute; left: -36px; width: 28px; height: 28px; margin: 0; vertical-align: baseline; opacity: .85; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.v-read .rd-hide-sp .rd-sp { display: none; }
.v-read .rd-ptools, .v-read .rd-aux { font-family: var(--f-ui); font-size: var(--t-sm); line-height: 1.55; }
.v-read .rd-ptools { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: 2px; color: var(--ink-3); }
.v-read .rd-ptools .btn { color: var(--ink-3); }
.v-read .rd-ptools .btn:hover { color: var(--ink); }
.v-read .rd-aux { margin-top: 8px; padding: 10px 14px; border-left: 3px solid var(--blue); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; display: flex; flex-direction: column; gap: 8px; }
.v-read .rd-aux-head { display: flex; align-items: center; justify-content: space-between; }
.v-read .rd-aux-head .btn { margin-right: -8px; }
.v-read .rd-trtext { color: var(--ink); white-space: pre-line; font-size: var(--t-md); }
.v-read .rd-hide-ru .rd-aux-tr { display: none; }

/* ---------- reader: end of text ---------- */
.v-read .rd-end { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; font-family: var(--f-ui); font-size: 15px; line-height: 1.55; }
.v-read .rd-quiz { gap: 12px; }
.v-read .rd-q { font-size: 1.1rem; line-height: 1.4; }
.v-read .rd-opt { justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 44px; padding-block: 8px; width: 100%; }
.v-read .rd-opt-key { color: var(--ink-3); }
.v-read .rd-opt.is-good { background: var(--good-soft); border-color: var(--good); }
.v-read .rd-opt.is-bad { background: var(--bad-soft); border-color: var(--bad); }
.v-read .rd-done .btn { white-space: normal; text-align: left; height: auto; min-height: 40px; padding-block: 8px; }

/* ---------- reader: sticky toolbar ---------- */
.v-read .rd-bar {
  position: sticky; z-index: 15; bottom: 12px; width: min(100%, 520px); margin: 22px auto 0; padding: 6px 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.v-read .rd-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 0; }
.v-read .rd-bar-row { display: flex; align-items: center; gap: 4px; padding-top: 3px; }
.v-read .rd-play { border-radius: 50%; width: 44px; min-width: 44px; height: 44px; }
.v-read .rd-pos { min-width: 3.4em; text-align: center; }
@media (max-width: 959px) {
  .v-read .rd-bar { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 8px); }
}
@media (max-width: 400px) {
  .v-read .rd-pos { display: none; }
  .v-read .rd-title { font-size: var(--t-lg); }
}

/* ---------- reader: settings popover ---------- */
.v-read .rd-pop {
  position: fixed; z-index: 40; overflow: auto; padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: pop-in .14s ease;
}
.v-read .rd-sw { align-items: flex-start; }
.v-read .rd-sw input { margin-top: 2px; flex: none; }
.v-read .rd-keys { margin: 0; }

/* ---------- AI text generation modal (lives outside .v-read) ---------- */
.rd-gen .rd-gen-text { white-space: pre-line; font-size: 1.05rem; line-height: 1.7; max-height: 46vh; overflow: auto; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); }