/* The 听写 reader widget (templates/partials/tingxie-widget.html, chinese-deck-ads#23): on the reader page and the
   Landing posts, linked by base.html where a page carries it. Colours are site.css's tokens only, so dark mode
   follows by itself. The lesson buttons, the paste box, then one ruled row per word. */

.tx-widget { margin: 44px 0 0; }
.tx-widget h3 { margin: 28px 0 4px; }
.tx-widget h3 [lang], .tx-old summary [lang] { font-weight: 500; }
.tx-widget h4 { margin: 18px 0 0; }
.tx-levels { max-width: 360px; }
.tx-book { margin: 14px 0 6px; font: 600 15px/1.3 var(--sans); color: var(--muted); }
/* Lesson buttons: a row of small practice boxes with the lesson's number, filled cobalt while its cards show. */
.tx-lesson-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-lesson {
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    border: 1.5px solid var(--ink);
    border-radius: 0;
    background: transparent;
    font: 600 17px/1 var(--serif);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.tx-lesson:hover { background: var(--soft); }
.tx-lesson[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tx-none { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.tx-old { margin: 24px 0 0; border-top: 1px solid var(--soft); padding-top: 4px; }
.tx-old summary {
    cursor: pointer;
    padding: 14px 0;
    font: 700 18px/1.3 var(--serif);
    color: var(--ink);
}
.tx-old summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.tx-widget .tx-form { margin-top: 28px; }
.tx-results { scroll-margin-top: 16px; }
.tx-credit, .tx-link { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.tx-link a { font-weight: 700; }

.tx-form { margin: 8px 0 0; padding: 0; }
.tx-form label { display: block; margin-bottom: 8px; }
.tx-form textarea { min-height: 120px; resize: vertical; font: 400 22px/1.6 var(--zh); }
.tx-hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.tx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.tx-actions .btn { flex: 1 1 100%; }
.tx-example {
    padding: 4px 0;
    border: 0;
    background: none;
    font: 600 15px/1.3 var(--sans);
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
@media (min-width: 600px) { .tx-actions .btn { flex: 0 0 auto; } }
#tx-turnstile { margin-top: 12px; }
.tx-status { min-height: 1.5em; margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.tx-status.error { color: var(--red); }

.tx-results { margin-top: 24px; }
.tx-results:not(:empty) { border-top: 2px solid var(--ink); }
.tx-card { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--soft); }
.tx-card.open { flex-direction: column; }
.tx-pic { flex: none; width: 120px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--soft); cursor: zoom-in; }
.tx-card.open .tx-pic { width: 100%; cursor: zoom-out; }
.tx-body { flex: 1; min-width: 0; }
.tx-head { display: flex; align-items: center; gap: 12px; }
.tx-word { font: 500 32px/1.2 var(--zh); color: var(--text); }
/* The play button: a small square in cobalt, filled while its clip plays. */
.tx-play {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.tx-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.tx-play:hover { background: var(--soft); }
.tx-play.playing { background: var(--ink); color: var(--paper); }
.tx-pinyin { font: 600 17px/1.4 var(--sans); color: var(--ink); }
.tx-english { font-size: 16px; overflow-wrap: anywhere; }
.tx-where { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.tx-where li { margin: 0; padding: 2px 0; }
.tx-where b { color: var(--text); }
.tx-note { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
/* A word that splits into its characters: the parts indented under a cobalt rule. */
.tx-group { flex-direction: column; }
.tx-group > .tx-body { width: 100%; }
.tx-parts { margin: 10px 0 0; padding-left: 14px; border-left: 1.5px solid var(--ink); }
.tx-parts .tx-card:last-child { border-bottom: 0; }
.tx-missing { align-items: center; }
.tx-missing .tx-word { font-size: 26px; }
@media (max-width: 599px) {
    .tx-pic { width: 96px; }
    .tx-word { font-size: 28px; }
}

.tx-more { margin: 20px 0 0; padding: 12px 0 12px 14px; border-left: 3px solid var(--ink); font-size: 15px; }
.tx-more a { font-weight: 700; }