/* cards-text.css — rewrite · reading · write · shadow · speak (direction A, calm editorial) */

/* ---------- shared bits ---------- */
.hintline[hidden], .note-slot:empty { display: none; }
.mic-note { display: flex; align-items: flex-start; gap: var(--s-2); font-family: var(--font-head); font-style: italic; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.mic-note .ic { margin-top: 1px; color: var(--warn); }

/* ruled paper textarea */
.inp.paper { min-height: 96px; padding: 0 var(--s-3); font-family: var(--font-head); font-size: var(--t-lg); line-height: 32px;
  border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; box-shadow: none; overflow-wrap: anywhere;
  background-color: transparent; background-attachment: local;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px); }
.inp.paper:focus { box-shadow: none; border-bottom-color: var(--accent); background-color: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.inp.paper::placeholder { font-style: italic; }

/* paper quote block */
.rw-src, .wr-src { margin: 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--line2); background: var(--surface2);
  font-family: var(--font-head); font-size: var(--t-lg); line-height: 1.5; overflow-wrap: anywhere; }
.rw-src .label { display: block; margin-bottom: var(--s-1); }
.wr-src { font-size: var(--t-md); color: var(--muted); }
.rw-ask { font-family: var(--font-head); font-style: italic; font-size: var(--t-xl); line-height: 1.3; }
.rw-attempt { font-family: var(--font-head); font-style: italic; font-size: var(--t-sm); color: var(--muted); }
.wr-task { font-family: var(--font-head); font-size: var(--t-xl); line-height: 1.3; overflow-wrap: anywhere; }
.wr-lede { font-family: var(--font-head); font-style: italic; font-size: var(--t-md); color: var(--muted); line-height: 1.5; }
details.src { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 var(--s-1); }
details.src summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
details.src[open] summary { color: var(--accent); }
details.src > div { padding: 0 0 var(--s-3); font-family: var(--font-head); font-size: var(--t-md); line-height: 1.55; overflow-wrap: anywhere; }

/* timer */
.timer { display: flex; flex-direction: column; gap: 6px; }
.timer-row { font-family: var(--font-head); font-size: var(--t-2xl); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.timer .bar i { transition: width 1s linear; }
.timer.low .timer-row { color: var(--bad); }
.timer.low .bar i { background: var(--bad); }

/* ---------- reading ---------- */
.rd-title { font-size: var(--t-2xl); line-height: 1.1; overflow-wrap: anywhere; }
.rd-help { font-family: var(--font-head); font-style: italic; font-size: var(--t-sm); color: var(--muted); }
.reading { font-family: var(--font-head); font-size: var(--t-lg); line-height: 1.7; max-width: 62ch; overflow-wrap: anywhere; }
.reading .w { cursor: pointer; border-bottom: 1px dotted var(--accent); border-radius: 2px; }
.reading .w:hover, .reading .w:focus-visible { background: var(--accent-soft); outline-offset: 1px; }
.reading .w.tapped { background: var(--accent-soft); border-bottom: 1px solid var(--accent); }
.gloss-pop { position: sticky; top: var(--s-2); z-index: 4; padding: var(--s-3) var(--s-4); background: var(--slip); border: 1px solid var(--line2); border-left: 3px solid var(--accent);
  border-radius: var(--r); box-shadow: 0 8px 18px -12px var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.gloss-pop[hidden] { display: none; }
.gp-main { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.gp-word { font-family: var(--font-head); font-size: var(--t-lg); min-width: 0; overflow-wrap: anywhere; }
.gp-ru { font-style: italic; color: var(--accent); }
.gp-word small { color: var(--muted); font-size: var(--t-sm); }
.gp-state { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); letter-spacing: .06em; color: var(--muted); }
.gp-state .ic { color: var(--ok); }
.gp-state.bad { color: var(--bad); }

.q { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.q-text { display: flex; gap: var(--s-3); align-items: baseline; font-family: var(--font-head); font-size: var(--t-lg); line-height: 1.35; }
.q-text .num { font-style: italic; color: var(--accent); flex: none; }
.opt { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: var(--s-2) var(--s-4); text-align: left; position: relative;
  font-size: var(--t-md); line-height: 1.35; color: var(--text); border: 1px solid var(--line2); border-radius: var(--r); background: transparent; overflow-wrap: anywhere;
  transition: background .15s, border-color .15s; }
.opt::before { content: ""; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--line2); border-radius: 50%; }
.opt .n { display: none; }
.opt .ot { position: relative; margin-right: auto; min-width: 0; }
.opt .ic { color: var(--ok); }
.opt:hover:not(:disabled) { background: var(--surface2); }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt.sel::before { border-color: var(--accent); background: radial-gradient(var(--accent) 45%, transparent 50%); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right::before { border-color: var(--ok); background: radial-gradient(var(--ok) 45%, transparent 50%); }
.opt.wrong { border-color: var(--bad); }
.opt.wrong .ot { color: var(--bad); }
.opt.wrong::before { border-color: var(--bad); }
.opt:disabled { cursor: default; }
.opt:disabled:not(.right):not(.wrong) { opacity: .55; }
.opt .pen { bottom: -6px; }

/* ---------- write ---------- */
.wr-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; }
.count-hint { margin-left: auto; font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.btn.mic.listening { animation: pulse 1.2s ease-in-out infinite; }
.mini-issues { padding: var(--s-2) var(--s-4); border-left: 3px solid var(--warn); background: var(--warn-soft); font-family: var(--font-head); font-style: italic; color: var(--warn); }
.mini-issues summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--font); font-style: normal; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.mini-issues > div { padding-bottom: var(--s-2); color: var(--text); }
.wr-stats { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; font-size: var(--t-sm); color: var(--muted); }
.wr-stats .bad { color: var(--bad); font-weight: 600; }

.written { font-family: var(--font-head); font-size: var(--t-lg); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: var(--s-4); border-left: 2px solid var(--line2); }
.written.ok { border-left-color: var(--ok); }
.diff-line { display: inline; }
mark.iss { background: none; color: inherit; cursor: pointer; border-bottom: 1.5px solid var(--warn); }
mark.iss::after { content: attr(data-n); font-family: var(--font-head); font-size: .75rem; font-style: italic; font-weight: 600; vertical-align: super; line-height: 0; color: var(--warn); margin-left: 2px; }
mark.iss:hover, mark.iss:focus-visible { background: var(--warn-soft); }

.issue { border-top: 1px solid var(--line); }
.issue:last-child { border-bottom: 1px solid var(--line); }
.issue-head { width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-1); text-align: left; }
.issue-head .num { font-size: var(--t-lg); font-style: italic; color: var(--warn); min-width: 1.2em; }
.issue-head .caret { margin-left: auto; color: var(--muted); display: inline-flex; transition: transform .2s; }
.issue.open .caret { transform: rotate(90deg); }
.issue-body { display: none; padding: 0 var(--s-1) var(--s-3) calc(var(--s-1) + 1.2em + var(--s-3)); flex-direction: column; gap: var(--s-3); }
.issue.open .issue-body { display: flex; }
.iss-item { display: flex; flex-direction: column; gap: var(--s-1); }
.iss-span { font-family: var(--font-head); font-size: var(--t-lg); }
.iss-span::first-line { text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; }
.iss-item p { font-size: var(--t-md); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.iss-fix { font-family: var(--font-head); font-style: italic; font-size: var(--t-lg); color: var(--ok); overflow-wrap: anywhere; }
.iss-fix .label { display: block; font-family: var(--font); font-style: normal; }

table.compare { width: 100%; border-collapse: collapse; }
table.compare th { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: right; padding: 0 0 var(--s-2); border-bottom: 1px solid var(--text); }
table.compare th:first-child { text-align: left; }
table.compare tbody th { font-size: var(--t-sm); letter-spacing: 0; text-transform: none; text-align: left; border-bottom: 1px dotted var(--line2); padding: var(--s-3) var(--s-2) var(--s-3) 0; }
table.compare td { font-family: var(--font-head); font-size: var(--t-xl); line-height: 1; text-align: right; font-variant-numeric: lining-nums tabular-nums; padding: var(--s-3) 0; border-bottom: 1px dotted var(--line2); }
table.compare td:last-child { color: var(--accent); }

/* ---------- shadow · speak ---------- */
.sh-text { font-family: var(--font-head); font-size: 1.75rem; line-height: 1.3; overflow-wrap: anywhere; }
.sh-ru { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.sh-ctl { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.sound.big { width: 56px; height: 56px; }
.sound.big .ic { width: 26px; height: 26px; }
.sound.mic { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.sound.mic:hover:not(:disabled) { background: var(--accent); opacity: .9; }
.sound.mic:disabled { opacity: .45; }
.sound.mic.listening { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); box-shadow: 0 0 0 5px var(--bad-soft); }
.mic-cap { flex: 1; min-width: 0; font-family: var(--font-head); font-style: italic; font-size: var(--t-sm); color: var(--muted); }
.sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.sp-stats > div { display: flex; flex-direction: column; align-items: center; padding: var(--s-4) var(--s-1); text-align: center; }
.sp-stats > div + div { border-left: 1px dotted var(--line2); }
.sp-stats b { font-family: var(--font-head); font-weight: 500; font-size: var(--t-2xl); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sp-stats span { margin-top: var(--s-1); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (min-width: 1024px) {
  .reading { font-size: 1.1875rem; }
  .sh-text { font-size: var(--t-2xl); }
  .rw-ask { font-size: 1.75rem; }
  .opt { padding-left: var(--s-3); }
  .opt::before { display: none; }
  .opt .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border: 1px solid var(--line2); border-radius: 50%;
    font-size: .6875rem; font-weight: 600; color: var(--muted); }
  .opt .n:empty { display: none; }
  .opt:has(.n:empty)::before { display: block; }
  .opt.sel .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .opt.right .n { background: var(--ok); border-color: var(--ok); color: var(--bg); }
  .opt.wrong .n { border-color: var(--bad); color: var(--bad); }
}