/* Parley Trip: what sits on top of Parley's stylesheet.

   Three scripts share the pages with English, so the one rule that matters
   is that every line of Japanese or Chinese carries a `lang` attribute: the
   same code point is drawn differently by a Japanese and a Chinese font, and
   a learner who sees the Chinese form of 直 on a Japanese card has been
   taught a wrong shape. The face is the platform's own (Hiragino, PingFang,
   Meiryo, Yahei); nothing is downloaded. */

:lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", var(--sans); }
:lang(zh), :lang(zh-CN) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", var(--sans); }

/* The script, large; its reading under it; the English under that. */
.tr-script { display: block; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; color: var(--ink); }
.tr-roma { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--u, var(--accent)); letter-spacing: .01em; }
.tr-en { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.tr-note { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

/* Pinyin coloured by tone: the four shapes, and grey for the neutral. It
   is the one place colour sits on text in this app, and it earns it, tone
   is the thing an English ear cannot hear at first. */
.t1 { color: #E5484D; } .t2 { color: #D9880E; } .t3 { color: #17A86B; } .t4 { color: #2F6BFF; } .t5 { color: #8E8CA3; }

/* A phrase row on a "discover" step, over Parley's .pc-word. */
.pc-word-fr { font-size: 22px; line-height: 1.3; }
.pc-word-roma { display: block; font-size: 15px; font-weight: 600; color: var(--u, var(--accent)); }
.pc-word .pc-word-en { margin-top: 2px; }
.pc-word-note { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-3); }
.pc-word-ex { font-style: normal; }
.pc-word-ex b { font-weight: 700; color: var(--ink); }
.pc-word .pc-hear { flex: none; }

/* An example on a pattern card: script, reading, English, on three lines. */
.examples .ex-3 { display: block; }
.examples .ex-3 .tr-script { font-size: 20px; }
.examples .ex-3 .tr-roma { font-size: 14.5px; }
.examples .ex-3 .tr-en { font-size: 14px; margin-top: 1px; }

/* The "say it out loud" step. One phrase at a time, the voice, then you. */
.pc-say-host { margin-top: 10px; }
.say-card { padding: 22px 22px 18px; border-radius: var(--r-lg); background: var(--u-wash, var(--accent-wash)); text-align: center; }
.say-card .tr-script { font-size: 34px; }
.say-card .tr-roma { font-size: 18px; }
.say-card .tr-en { font-size: 15px; }
.say-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.say-actions .btn { min-width: 128px; }
.say-actions .btn svg { width: 16px; height: 16px; fill: currentColor; }
.say-heard { min-height: 24px; margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.say-heard b { color: var(--ink); }
.say-heard.ok b { color: var(--ok); }
.say-heard.no b { color: var(--no); }
.say-pips { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.say-pips i { width: 8px; height: 8px; border-radius: 50%; background: rgba(27, 26, 46, .14); }
.say-pips i.on { background: var(--u, var(--accent)); }
.say-pips i.past { background: rgba(27, 26, 46, .3); }
.say-tip { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.btn.live { background: var(--no); border-color: var(--no); color: #fff; }

/* A listening question: the play button is the prompt. */
.q-say { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.q-say .play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font: inherit; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 20px var(--accent-glow);
}
.q-say .play svg { width: 18px; height: 18px; fill: #fff; }
.q-say .play:active { transform: scale(.97); }
.q-say small { color: var(--ink-3); font-size: 13px; }
.q-text .tr-script { font-size: 26px; }
.q-text .tr-roma { font-size: 15px; }

/* The hub: three languages as cards. */
.lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
@media (max-width: 860px) { .lang-grid { grid-template-columns: 1fr; } }
.lang-card { position: relative; display: block; padding: 22px 22px 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: inherit; text-decoration: none; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.lang-card::after { content: ""; position: absolute; top: -60px; right: -60px; width: 190px; height: 190px; border-radius: 50%; background: var(--u-wash); opacity: .9; }
.lang-card > * { position: relative; z-index: 1; }
.lang-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.lang-flag { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--u-wash); font-size: 28px; }
.lang-card h3 { margin: 12px 0 2px; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.lang-card .native { font-size: 15px; font-weight: 600; color: var(--u); }
.lang-card .meta { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.lang-card .bar { margin-top: 12px; }
.lang-card .foot-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.lang-card .foot-row b { color: var(--ink); }
.lang-card .verdict { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.lang-card .verdict b { color: var(--u); }

/* The countdown chip on a language page. */
.countdown { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--u-wash); color: var(--u); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.countdown b { font-size: 16px; }

/* The programme: thirty rows, by week. */
.week-h { margin: 26px 0 8px; font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--u); }
.week-h span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-left: 8px; }
.day-row .step-mark.lvl { font-size: 15px; }
.day-row.done .step-mark::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.day-row.today { box-shadow: 0 0 0 2px var(--u) inset; }

/* The comparison, three columns. */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 14px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
.compare > div { padding: 22px 22px 20px; }
.compare > div + div { border-left: 1px solid var(--line-soft); }
@media (max-width: 860px) { .compare > div + div { border-left: 0; border-top: 1px solid var(--line-soft); } }
.compare h3 { margin: 0 0 4px; font-family: var(--display); font-size: 20px; font-weight: 800; }
.compare .ck { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--u); }
.compare p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.compare ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.compare li { margin: 3px 0; }
.compare .grade { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--u-wash); color: var(--u); font-weight: 800; font-size: 13px; }

/* The phrasebook. */
.pb-search { width: 100%; height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 16px; }
.pb-group { margin-top: 22px; }
.pb-group h3 { margin: 0 0 8px; font-family: var(--display); font-size: 16px; color: var(--u); }
.pb-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pb-row:first-of-type { border-top: 0; }
.pb-row .pc-hear { flex: none; margin-top: 4px; }
.pb-row .tr-script { font-size: 20px; }
.pb-row .tr-roma { font-size: 14.5px; }
.pb-row .tr-en { font-size: 14px; margin-top: 1px; }
.pb-row .tr-note { font-size: 13px; }
.pb-row .pb-box { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 6px; }
.pb-row .pb-box.known { color: var(--ok); }

/* Session structure, on the plan page and the hub. */
.session-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 860px) { .session-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.session-step { padding: 14px 14px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.session-step b { display: block; font-family: var(--display); font-size: 22px; color: var(--u, var(--accent)); }
.session-step span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.session-step small { display: block; margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Settings rows. */
.set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.set-row:first-child { border-top: 0; }
.set-row label { font-weight: 700; }
.set-row small { display: block; font-weight: 500; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.set-row input[type=date], .set-row select { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 15px; }
.set-row input[type=range] { width: 180px; }

/* The finish card's next-day promise. */
.pc-tomorrow { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.pc-tomorrow b { color: var(--ink); }

/* Under 700 px the phrase on a card wants the width. */
@media (max-width: 700px) {
  .tr-script { font-size: 24px; }
  .say-card .tr-script { font-size: 30px; }
}

/* The mic button's faces: listening (red, as before) and checking. */
.btn.busy { opacity: .75; cursor: progress; }

/* The account chip in the top bar, beside the gear. */
.topbar .account-chip { margin-right: 8px; }
.account-chip .avatar.initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; }
@media (max-width: 700px) { .account-chip .chip-name { display: none; } }

/* The review as a deck of cards. One card at a time: the prompt, the
   attempt, the answer, the verdict. */
.fc-host { padding-top: 12px; }
.fc { position: relative; padding: 0 0 8px; }
.fc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fc-top .pc-exit { flex: none; }
.fc-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(27, 26, 46, .1); overflow: hidden; }
.fc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--u, var(--accent)); transition: width .3s var(--ease); }
.fc-count { flex: none; font-size: 13px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fc-face { padding: 26px 22px 22px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: center; }
.fc-front { background: var(--u-wash, var(--accent-wash)); border-color: transparent; }
.fc-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--u, var(--accent)); }
.fc-en { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.fc-ask { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.fc-front .q-say { justify-content: center; margin: 4px 0 6px; }
.fc-back { margin-top: 12px; text-align: left; animation: fc-in .25s var(--ease); }
@keyframes fc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fc-answer { display: flex; align-items: flex-start; gap: 12px; }
.fc-answer .pc-hear { flex: none; margin-top: 6px; }
.fc-answer .tr-script { font-size: 30px; }
.fc-answer .tr-roma { font-size: 17px; }
.fc-reply { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.fc-reply b { color: var(--ink); }
.fc .say-heard { text-align: center; }
.fc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.fc-actions .btn { min-width: 150px; }
.fc-actions .btn svg { width: 16px; height: 16px; fill: currentColor; }
.fc-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.fc-rate { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; cursor: pointer; transition: transform .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
.fc-rate b { font-size: 15px; font-weight: 800; color: var(--ink); }
.fc-rate small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.fc-rate:hover { transform: translateY(-1px); border-color: rgba(27, 26, 46, .22); }
.fc-rate.again b { color: var(--no); }
.fc-rate.easy b { color: var(--ok); }
.fc-rate.suggested { border-color: var(--u, var(--accent)); background: var(--u-wash, var(--accent-wash)); box-shadow: 0 0 0 3px var(--u-wash, var(--accent-wash)); }
.fc-rate:focus-visible { outline: 3px solid var(--u, var(--accent)); outline-offset: 2px; }
.fc-done .fc-tally { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); }
.fc-done .fiche-actions { margin-top: 14px; }
@media (max-width: 700px) {
  .fc-en { font-size: 24px; }
  .fc-answer .tr-script { font-size: 26px; }
  .fc-rates { gap: 6px; }
  .fc-rate { padding: 10px 4px 8px; border-radius: 12px; }
  .fc-rate b { font-size: 14px; }
}