/* keying-feedback.css — the trainers' keying feedback (keying-feedback.js):
   the uneven marker in the answer and history chips, the strip for one keyed
   character, the Keying timing panel and the session report's Keying section.
   Colours: green = ideal and accepted, grey = your keying, amber = a fault,
   red = wrong (as the copy diff). Shared by the Trainer and Advanced Trainer. */

/* Correct, but uneven: dotted amber underline; keyed characters are clickable. */
.dg .dgc.unv .dgs {
    text-decoration: underline dotted var(--yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
}
.dg .dgc.keyed { cursor: pointer; }
.hchip.hchip-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ─── Strip ─── */
.keying-detail { width: min(100%, 420px); margin: 10px auto 0; text-align: left; }
.keying-detail[hidden] { display: none; }
.kf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.kf-char, .kf-reading { font-family: var(--mono); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.kf-arrow { color: var(--muted); font-size: 1.5rem; line-height: 1.1; }
.kf-ok { color: var(--green); }
.kf-wrong { color: var(--red); }
.kf-reading { color: var(--muted); letter-spacing: .08em; white-space: pre; }
.kf-badge { padding: 3px 9px; border-radius: 6px; background: rgba(217, 164, 65, .27); color: var(--yellow); font-size: .85rem; line-height: 1.3; }
.kf-expl { margin-top: 4px; color: var(--yellow); font-size: .85rem; line-height: 1.35; }
.kf-rows { display: block; margin-top: 10px; overflow: visible; }
.kf-row-label, .kf-measurement { font: 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.kf-row-label { fill: var(--muted); }
.kf-fault-label { fill: var(--yellow); }
.kf-length-label, .kf-pause-label { fill: var(--muted); }
.kf-label-guide { stroke: var(--muted); stroke-width: .5; opacity: .5; }
.kf-base { stroke: var(--border); stroke-width: 1; }
.kf-ideal { fill: var(--green); }
.kf-yours { fill: var(--muted); }
.kf-yours-good { fill: var(--green); }
.kf-fault { fill: var(--yellow); }
.kf-pause-fault { fill: none; stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 4 3; }
.kf-pause { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.kf-pause-good { stroke: var(--green); }
.kf-break { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.kf-hit { fill: transparent; }
.kf-info { margin-top: 4px; color: var(--muted); font-size: .8rem; line-height: 1.3; text-align: left; }
.kf-info[hidden] { display: none; }

/* ─── Keying timing panel ─── */
.kf-panel { width: min(100%, 420px); margin: 12px auto 0; padding: 4px 12px 8px; border: 1px solid var(--border); border-radius: 8px; text-align: left; }
.kf-panel[hidden] { display: none; }
.kf-panel-title { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text); padding: 6px 0; }
.kf-panel-rows { display: grid; gap: 8px; margin-top: 4px; }
.kf-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; font-size: .85rem; }
.kf-plabel, .kf-rlabel { color: var(--muted); }
.kf-pvalue, .kf-rvalue { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kf-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.kf-fill { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.kf-fill.kf-good { background: var(--green); }
.kf-fill.kf-warn { background: var(--yellow); }
.kf-fill.kf-bad { background: var(--red); }
:is(.kf-pvalue, .kf-rvalue, .kf-report-line).kf-good { color: var(--green); }
:is(.kf-pvalue, .kf-rvalue, .kf-report-line).kf-warn { color: var(--yellow); }
:is(.kf-pvalue, .kf-rvalue, .kf-report-line).kf-bad { color: var(--red); }

/* ─── Session report ─── */
.kf-report-rows { display: grid; gap: 4px; margin-top: 6px; max-width: 420px; }
.kf-rrow { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.kf-report-line { margin-top: 6px; color: var(--muted); font-size: .85rem; line-height: 1.35; }

/* Finished-session review: horizontal gestures, with normal vertical scrolling. */
.kf-review { min-width: 0; }
.kf-group-nav { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; }
.kf-group-nav button { flex: 0 0 44px; min-height: 64px; font-size: 1.8rem; padding: 4px; }
.kf-group-card { flex: 1; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; text-align: center; touch-action: pan-y pinch-zoom; }
.kf-group-text { font: 700 1.15rem var(--mono); overflow-wrap: anywhere; }
.kf-group-count { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.kf-group-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kf-context { margin-top: 12px; overflow-wrap: anywhere; font-size: .9rem; color: var(--muted); }
.kf-context strong { color: var(--text); }
.kf-swipe { touch-action: pan-y pinch-zoom; padding: 8px 0; min-height: 170px; }
.kf-swipe:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kf-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kf-nav button { min-height: 44px; padding: 8px 10px; }
.kf-count { white-space: nowrap; color: var(--muted); font-size: .9rem; }
.kf-hint { margin-top: 8px; color: var(--muted); font-size: .8rem; }
.kf-review[hidden], .kf-report[hidden], .kf-swipe[hidden], .kf-nav[hidden] { display: none; }