/* public/assets/css/tt_weekly.css -- the weekly speaking test (tt_weekly.js) and its
   printable report, on BOTH pages that carry it: the Teacher Training home page
   (_tt_sections.php) and, since 2026-10-22, the daiologue.com homepage
   (_tt_weekly_home.php). Moved here unchanged from landing_training.css, which only
   the Training page loads; the print rules now key on body:has(#tt-report) instead
   of body.lv2-page-training, so they work on either page and only once a report
   exists. Loaded by lv2/_head.php after landing_v2.css. */

/* ── This week's speaking test (#weekly, tt_weekly.js, 2026-10-13) ───────── */
.lv2 .tt-weekly { max-width: 640px; margin: 0 auto; }
.lv2 .tt-weekly-intro { text-align: center; }
.lv2 .tt-weekly-sounds { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lv2 .tt-weekly-sounds li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--lv2-glass-border); color: var(--lv2-text-2); font-size: 15px; }
.lv2 .tt-weekly-sym, .lv2 .tt-wk-sound, .lv2 .tt-wk-ipa { font-family: 'Noto Sans', 'DejaVu Sans', 'Segoe UI', sans-serif; }
.lv2 .tt-weekly-sym { color: var(--lv2-text); font-weight: 700; margin-right: 4px; }
.lv2 .tt-weekly mark, .tt-report mark { background: none; color: #a5b4fc; font-weight: 800; }
.lv2 .tt-weekly-go { margin-bottom: 4px; }
/* The script hides "Next word" until a word is scored, and the Start button until it
   can run, with the hidden attribute -- which .lv2 .lv2-btn-primary's display:
   inline-block was overriding, so Next showed from the start (found 2026-10-22). */
.lv2 .tt-weekly [hidden] { display: none !important; }

.lv2 .tt-wk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--lv2-text-3); font-size: 14px; }
.lv2 .tt-wk-dots { display: flex; gap: 6px; }
.lv2 .tt-wk-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.lv2 .tt-wk-dots i.is-done { background: #10b981; }
.lv2 .tt-wk-dots i.is-now { background: var(--lv2-accent); }
.lv2 .tt-wk-card { padding: 26px 22px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--lv2-glass-border); text-align: center; }
.lv2 .tt-wk-sound { color: var(--lp-accent); font-weight: 800; font-size: 15px; }
.lv2 .tt-wk-sound span { color: var(--lv2-text-3); font-weight: 600; margin-left: 4px; }
.lv2 .tt-wk-word { font-size: 44px; font-weight: 800; color: var(--lv2-text); margin: 6px 0 0; letter-spacing: -0.5px; }
.lv2 .tt-wk-ipa { color: var(--lv2-text-3); font-size: 17px; margin-bottom: 18px; }
.lv2 .tt-wk-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lv2 .tt-wk-rec.is-rec { background: #ef4444; }
.lv2 .tt-wk-msg { min-height: 1.4em; margin: 14px 0 0; color: var(--lv2-text-2); font-size: 14px; }
.lv2 .tt-wk-msg.is-err { color: #fca5a5; }
.lv2 .tt-wk-result:empty { display: none; }
.lv2 .tt-wk-result { margin-top: 14px; text-align: left; }
.lv2 .tt-wk-score { text-align: center; font-size: 18px; margin-bottom: 10px; }
.lv2 .tt-wk-score.is-good { color: #6ee7b7; } .lv2 .tt-wk-score.is-near { color: #fcd34d; } .lv2 .tt-wk-score.is-work { color: #fca5a5; }
.lv2 .tt-wk-lines div { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--lv2-text-2); }
.lv2 .tt-wk-lines span:first-child { flex: 0 0 120px; }
.lv2 .tt-wk-lines b { flex: 0 0 30px; text-align: right; color: var(--lv2-text); }
.tt-wk-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; display: block; }
.tt-wk-bar i { display: block; height: 100%; border-radius: 4px; background: #94a3b8; }
.tt-wk-bar.is-good i { background: #10b981; } .tt-wk-bar.is-near i { background: #f59e0b; } .tt-wk-bar.is-work i { background: #ef4444; }
.lv2 .tt-wk-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(88,101,242,0.12); color: var(--lv2-text-2); font-size: 14px; }
.lv2 .tt-wk-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; }
/* The daily activities (2026-10-22): the instruction line, a minimal pair, an IPA
   day's transcription in the word's place, a sentence, and the intro's lists. */
.lv2 .tt-wk-instr { margin: 0 0 12px; color: var(--lv2-text-2); font-size: 14px; }
.lv2 .tt-wk-pair { margin: 8px 0 0; font-size: 18px; color: var(--lv2-text-3); }
.lv2 .tt-wk-pair b { color: var(--lv2-text); }
.lv2 .tt-wk-pair span { margin: 0 6px; }
.lv2 .tt-wk-word--ipa { font-family: 'Noto Sans', 'DejaVu Sans', 'Segoe UI', sans-serif; font-weight: 700; margin-bottom: 18px; }
.lv2 .tt-wk-word.is-sentence { font-size: 24px; line-height: 1.35; letter-spacing: 0; margin-bottom: 18px; }
.lv2 .tt-wk-reveal { margin-top: -10px; font-size: 20px; color: var(--lv2-text); }
.lv2 .tt-weekly-caption { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--lv2-text); }
.lv2 .tt-weekly-caption em { font-style: normal; color: #a5b4fc; }
.lv2 .tt-weekly-vs { color: var(--lv2-text-3); margin: 0 2px; }
.lv2 .tt-weekly-sounds.is-sentences { flex-direction: column; align-items: stretch; }
.lv2 .tt-weekly-sounds.is-sentences li { border-radius: 12px; text-align: left; }
.tt-rp-tomorrow { margin: 18px 0 0; font-size: 16px; font-weight: 700; color: #6ee7b7; }
.lv2 .tt-wk-skip { background: none; border: 0; color: var(--lv2-text-3); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }

/* The report: dark on the page, plain black-on-white on paper. */
.tt-report { padding: 24px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--lv2-glass-border); color: var(--lv2-text-2); }
.tt-rp-brand { font-weight: 800; font-size: 18px; color: var(--lv2-text); }
.tt-rp-brand em { font-style: normal; color: #818cf8; }
.tt-rp-brand small { font-size: 12px; font-weight: 600; color: var(--lv2-text-3); margin-left: 4px; }
.tt-rp-title { font-size: 24px; line-height: 1.25; font-weight: 800; color: var(--lv2-text); margin: 6px 0 0; }
.tt-rp-meta { font-size: 14px; color: var(--lv2-text-3); }
.tt-rp-name { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.tt-rp-name input { flex: 1; max-width: 280px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--lv2-glass-border); background: rgba(0,0,0,0.25); color: var(--lv2-text); font: inherit; font-size: 16px; }
.tt-rp-overall { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; }
.tt-rp-overall b { font-size: 40px; color: var(--lv2-text); line-height: 1; }
.tt-rp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tt-rp-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--lv2-text-3); padding: 8px 6px; border-bottom: 1px solid var(--lv2-glass-border); }
.tt-rp-table td { padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; color: var(--lv2-text); }
.tt-rp-table small { display: block; color: var(--lv2-text-3); font-size: 12px; font-family: 'Noto Sans', 'DejaVu Sans', 'Segoe UI', sans-serif; }
.tt-rp-sym { font-family: 'Noto Sans', 'DejaVu Sans', 'Segoe UI', sans-serif; font-weight: 700; }
.tt-rp-num { text-align: center; font-variant-numeric: tabular-nums; }
.tt-rp-v { font-weight: 700; } .tt-rp-v.is-good { color: #6ee7b7; } .tt-rp-v.is-near { color: #fcd34d; } .tt-rp-v.is-work { color: #fca5a5; } .tt-rp-v.is-na { color: var(--lv2-text-3); }
.tt-report h2 { margin: 22px 0 8px; font-weight: 700; font-size: 16px; color: var(--lv2-text); }
.tt-rp-tips { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.tt-rp-small { font-size: 12px; color: var(--lv2-text-3); margin: 18px 0 6px; }
.tt-rp-cta { font-size: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(88,101,242,0.12); }
.tt-rp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* First-language comparison (2026-10-14, tt_weekly.js l1Section) */
.tt-rp-l1-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 10px; }
.tt-rp-l1-pick select { min-height: 44px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--lv2-glass-border); background: rgba(0,0,0,0.25); color: var(--lv2-text); font: inherit; font-size: 16px; }
.tt-rp-l1-pick select option { color: #111; }
.tt-rp-l1-chosen, .tt-rp-l1-cell { display: none; }   /* print only */
.tt-rp-l1-sum { font-size: 14px; margin: 0 0 8px; color: var(--lv2-text); }
.tt-rp-l1-note { font-size: 12px; color: var(--lv2-text-3); margin: 8px 0 0; }
/* About you (2026-10-19, tt_weekly.js aboutSection): on screen only. */
.tt-rp-about { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--lv2-glass-border); }
.tt-rp-about-q { font-size: 14px; color: var(--lv2-text); margin: 8px 0; }
.tt-rp-about-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-rp-chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lv2-glass-border); background: rgba(255,255,255,0.05); color: var(--lv2-text); font: inherit; font-size: 14px; cursor: pointer; }
.tt-rp-chip:hover { background: rgba(255,255,255,0.1); }
.tt-rp-chip.is-on { background: rgba(88,101,242,0.3); border-color: rgba(129,140,248,0.7); }
.tt-rp-about-setting { margin-top: 6px; }
.tt-rp-about-note { font-size: 12px; color: var(--lv2-text-3); margin: 10px 0 0; }
.tt-rp-about-thanks { font-size: 14px; color: #6ee7b7; margin: 14px 0 0; }
@media (max-width: 560px) {
  .tt-rp-table td small { font-size: 11px; }
  .lv2 .tt-wk-word { font-size: 36px; }
}

/* Printing: the report alone, black on white, on one A4 page where it fits.
   2026-10-14: was `visibility: hidden` on everything else, which hides the page
   but keeps its space -- the PDF opened on a blank page and the report began
   at the foot of page 2, where it sat in the landing page's flow. Now
   everything that neither is nor contains the report is display:none, and the
   containers that hold it lose their spacing, so the report starts at the top
   of page 1. (:has() -- Chrome 105, Safari 15.4, Firefox 121.) */
@media print {
  html:has(#tt-report), body:has(#tt-report) { background: #fff !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  body:has(#tt-report)::before, body:has(#tt-report)::after { display: none !important; }
  body:has(#tt-report) *:not(:has(#tt-report)):not(#tt-report):not(#tt-report *) { display: none !important; }
  body:has(#tt-report) *:has(#tt-report) {
    display: block !important; position: static !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important;
    background: none !important; box-shadow: none !important; transform: none !important; backdrop-filter: none !important;
  }
  /* The look is print_doc.css (linked media=print in lv2/_head.php, AFTER this
     file; #tt-report carries .pd). What follows only undoes the dark screen
     styles and lays out what is particular to this report. */
  #tt-report { padding: 0; border: 0; border-radius: 0; }
  #tt-report * { color: #111 !important; background: transparent !important; box-shadow: none !important; }
  #tt-report .pd-brand em, #tt-report mark { color: #4f46e5 !important; }
  #tt-report .pd-brand small, #tt-report .pd-sub, #tt-report .pd-foot, #tt-report th,
  #tt-report .tt-rp-table td small, #tt-report .tt-rp-overall span { color: #555 !important; }
  #tt-report .tt-rp-name { font-size: 11pt; margin: 0 0 10pt; }
  #tt-report .tt-rp-name input { border: 0; border-bottom: 1px solid #999; border-radius: 0; padding: 2px 0; font-size: 11pt; }
  #tt-report .tt-rp-name.is-empty { display: none; }
  /* The average, as one of print_doc's summary boxes. */
  #tt-report .tt-rp-overall { display: inline-block; margin: 0 0 12pt; border: 1px solid #ccc; border-radius: 6pt; padding: 5pt 10pt; font-size: 9pt; }
  #tt-report .tt-rp-overall b { display: block; font-size: 14pt; line-height: 1.3; }
  #tt-report .tt-rp-overall span { font-size: 9pt; }
  /* Sound and word each on one line, the score beside them. */
  #tt-report .tt-rp-table { table-layout: fixed; }
  #tt-report .tt-rp-table th:nth-child(1) { width: 32%; }
  #tt-report .tt-rp-table th:nth-child(2) { width: 30%; }
  #tt-report .tt-rp-table th:nth-child(3) { width: 14%; text-align: right; }
  #tt-report .tt-rp-table td { vertical-align: baseline; }
  #tt-report .tt-rp-table td small { display: inline; font-size: 9pt; margin-left: 5pt; }
  #tt-report .tt-rp-num { text-align: right; font-weight: 700; }
  #tt-report .tt-rp-v.is-good { color: #047857 !important; }
  #tt-report .tt-rp-v.is-near { color: #b45309 !important; }
  #tt-report .tt-rp-v.is-work { color: #b91c1c !important; }
  #tt-report .tt-rp-v.is-na   { color: #777 !important; }
  #tt-report .tt-rp-tips { font-size: 10pt; line-height: 1.45; padding-left: 16pt; }
  #tt-report .tt-rp-cta { font-size: 10pt; border: 1px solid #ccc; border-radius: 6pt; break-inside: avoid; }
  #tt-report .tt-rp-actions, #tt-report .tt-rp-about, #tt-report .tt-rp-tomorrow { display: none !important; }
  /* First-language comparison: the choice becomes a line of text; no choice, no section. */
  #tt-report .tt-rp-l1.is-empty, #tt-report .tt-rp-l1-pick { display: none !important; }
  #tt-report .tt-rp-l1-chosen { display: block; font-size: 10pt; font-weight: 700; margin: 0 0 4pt; }
  #tt-report .tt-rp-l1-sum { font-size: 10pt; margin: 0 0 6pt; }
  #tt-report .tt-rp-l1-note { font-size: 8.5pt; color: #666 !important; margin: 4pt 0 0; }
  /* One page (Joe, 2026-10-14): with the comparison as a second table the
     report ran onto page 2 (six-sound rounds, longer languages), leaving the
     course box alone there. On paper the comparison is a fifth column of the
     results table instead (tt_weekly.js fills .tt-rp-l1-cell), the section
     keeps its heading, choice and summary, and the spacing is a little tighter. */
  #tt-report .tt-rp-l1 .tt-rp-table { display: none !important; }
  #tt-report.has-l1 .tt-rp-l1-cell { display: table-cell; }
  #tt-report.has-l1 > .tt-rp-table { font-size: 9.5pt; }
  #tt-report.has-l1 > .tt-rp-table th:nth-child(1) { width: 20%; }
  #tt-report.has-l1 > .tt-rp-table th:nth-child(2) { width: 21%; }
  #tt-report.has-l1 > .tt-rp-table th:nth-child(3) { width: 13%; }
  #tt-report.has-l1 > .tt-rp-table th:nth-child(4) { width: 17%; }
  #tt-report.has-l1 > .tt-rp-table td small { font-size: 8.5pt; }
  #tt-report .tt-rp-table td { padding-top: 3pt; padding-bottom: 3pt; }
  #tt-report h2 { margin: 10pt 0 3pt; }
  #tt-report .tt-rp-name { margin: 0 0 6pt; }
  #tt-report .tt-rp-overall { margin: 0 0 8pt; }
  #tt-report .pd-sub { margin-bottom: 8pt; }
  #tt-report .tt-rp-small { margin: 8pt 0 4pt; }
  #tt-report .tt-rp-cta { break-before: avoid; }
}