/* Sentence rows, word colours, passage, explanation text, glossary, dialogs, phone layout. */
/* sentence rows */
.sentences { display: flex; flex-direction: column; gap: 6px; }
.para-gap { height: 10px; }
.row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; cursor: pointer; }
.row.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.row .text { font-size: 17px; line-height: 1.6; }
.speaker { color: var(--accent); font-weight: 600; margin-right: 6px; font-size: 14px; }
.row .ctrls { display: flex; gap: 6px; align-items: center; align-self: start; }
.row .ctrls button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: 0; font-size: 13px; }
.row .ctrls button.rec { color: var(--rec); }
.row .ctrls button.rec.on { background: var(--rec); color: #fff; border-color: var(--rec); }
.row .ctrls button.playing { background: var(--accent); color: #fff; border-color: var(--accent); }
.badge { min-width: 40px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 6px; padding: 2px 6px; font-size: 14px; }
.badge.good { color: var(--good); } .badge.mid { color: var(--mid); } .badge.bad { color: var(--bad); }
.badge.best { font-weight: 400; color: var(--muted); font-size: 12px; }
.row .detail { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.row .status { font-size: 13px; color: var(--muted); }
.level { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.level div { height: 100%; width: 0; background: var(--rec); transition: width 60ms; }

/* word colouring */
.w { border-radius: 3px; }
.w.good { color: var(--good); }
.w.mid { color: var(--mid); text-decoration: underline wavy; text-underline-offset: 4px; }
.w.bad { color: var(--bad); text-decoration: underline wavy; text-underline-offset: 4px; }
.w.omitted { color: var(--muted); text-decoration: line-through; }
.w.inserted { color: var(--ins); font-style: italic; }

.scores { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin-top: 4px; }
.scores .big { font-size: 28px; font-weight: 700; }
.scores span { color: var(--muted); font-size: 13px; }
.scores b { color: var(--ink); font-variant-numeric: tabular-nums; }
.legend { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 12px; }

/* timing editor */
.timing { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; padding-top: 6px; border-top: 1px dashed var(--line); }
.timing input { width: 74px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }

/* passage, explanation */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.panel-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.panel select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.seek { width: 100%; margin-top: 10px; accent-color: var(--accent); }
.status { color: var(--muted); font-size: 13px; }
.passage { font-size: 18px; line-height: 1.8; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.passage p { margin: 0 0 12px; }
.passage .ps { border-radius: 4px; padding: 1px 0; cursor: pointer; }
.passage .ps.now { background: var(--active); }
.passage .ps.off { opacity: .35; }
.part-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.part-bar button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.part-bar button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.part-bar .pb { font-variant-numeric: tabular-nums; margin-left: 4px; opacity: .8; }
.warn { color: var(--mid); font-size: 13px; margin-top: 6px; }
.prose { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; font-size: 16px; }
.prose p { margin: 0 0 12px; }
.glossary { display: grid; gap: 10px; }
.gl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.gl .term { font-weight: 700; }
.gl .ex { color: var(--muted); font-size: 14px; margin-top: 4px; }
h2.sub { font-size: 16px; margin: 24px 0 10px; }

dialog { border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: min(460px, 92vw); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h2 { margin: 0 0 6px; font-size: 18px; }
dialog label { display: block; margin: 12px 0; font-size: 14px; }
dialog a { color: var(--accent); }
dialog input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.muted { color: var(--muted); font-size: 13px; }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 760px) {
  /* phone: the lesson list becomes a menu that slides in from the right, next to its button */
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); z-index: 40;
    border-right: 0; border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .22s ease; box-shadow: -4px 0 24px rgba(0,0,0,.18); }
  .sidebar.open { transform: none; }
  .menu-shade.open { display: block; }
  .menu-btn { display: inline-block; }
  /* buttons on the first line (right), the full-width title under them; only the tabs stay pinned */
  .topbar { flex-wrap: wrap; align-items: center; padding: 12px 0 8px; position: static; row-gap: 6px; }
  .top-actions { order: -1; width: 100%; justify-content: flex-end; }
  .title-block { width: 100%; min-width: 0; }
  h1 { font-size: 21px; }
  .tabs { top: 0; }
  .btn-label { display: none; }
  .top-actions { gap: 6px; }
  .legend { flex-wrap: wrap; row-gap: 2px; }
  .legend .w { white-space: nowrap; }
  .main { padding: 0 16px 60px; }
  .hint { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: 12px; }
}

/* phone: the tab row scrolls sideways when English labels do not fit */
@media (max-width: 760px) { .tabs { overflow-x: auto; scrollbar-width: none; } .tabs button { white-space: nowrap; flex: none; } }