/* 口试练习 home + 练习记录 pages (layout B) — accent colour, topic sheet,
   history. Loaded after speaking.css + speaking-b.css.
   The accent is a light peach: selected tile, start button, topic sheet;
   no black fills. */

.sp-lobby .sp {
    --tone: #ffe9e0;        /* selected tile */
    --tone-line: #ffc4ae;   /* its outline */
    --tone-ink: #a2462a;    /* text on it */
    --tone-btn: #ffd4c4;    /* start button */
    --tone-btn-ink: #7c3019;
    --tone-btn-hover: #ffc7b3;
}

/* Theme tints used by the topic sheet. */
.sp-lobby [data-tint="random"] { --tint: #f1efeb; --tint-ink: #5f5a53; }
.sp-lobby [data-tint="sky"] { --tint: #e2f0fd; --tint-ink: #22598f; }
.sp-lobby [data-tint="pink"] { --tint: var(--pink-bg); --tint-ink: var(--pink-ink); }
.sp-lobby [data-tint="mint"] { --tint: var(--mint-bg); --tint-ink: var(--mint-ink); }
.sp-lobby [data-tint="lilac"] { --tint: var(--lilac-bg); --tint-ink: var(--lilac-ink); }
.sp-lobby [data-tint="butter"] { --tint: var(--butter-bg); --tint-ink: var(--butter-ink); }
.sp-lobby [data-tint="peach"] { --tint: #ffe9e0; --tint-ink: #a2462a; }
.sp-lobby [data-tint="aqua"] { --tint: var(--aqua-bg); --tint-ink: var(--aqua-ink); }

/* ---------- Exam tabs + mode tiles ---------- */
/* The exam tabs keep layout B's white slider; on the history page the
   tabs sit outside the form, so the slide follows <main data-lang>. */
.sp-lobby .sp[data-lang="ms"] .sp-lang-seg i { transform: translateX(100%); }

/* Exam tabs with the round history link on their right. */
.sp-lang-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.sp-lobby .sp-lang-row .sp-lang-seg { flex: 0 1 320px; min-width: 0; margin: 0; }
.sp-lang-row .sp-icon-link { flex: none; width: 46px; height: 46px; }
.sp-icon-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.sp-icon-link:hover { background: var(--tone); color: var(--tone-ink); }
.sp-icon-link:active { transform: scale(0.94); }

.sp-lobby .sp-mode {
    border: 2px solid transparent;
    animation: sp-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
}
.sp-lobby .sp-mode:hover { background: #f1eee9; }
.sp-lobby .sp-mode:has(input:checked) {
    border-color: var(--tone-line);
    background: var(--tone);
    color: var(--tone-ink);
    transform: scale(1.03);
}
.sp-lobby .sp-mode:has(input:checked) .sp-mode-time { color: var(--tone-ink); opacity: 0.7; }
.sp-lobby .sp-mode:has(input:checked) .sp-mode-tag { background: #fff; color: var(--tone-ink); }
.sp-lobby .sp-mode-check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tone-ink);
    color: #fff;
    --icon-size: 15px !important;
    font-size: 15px !important;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sp-lobby .sp-mode:has(input:checked) .sp-mode-check { opacity: 1; transform: scale(1); }
.sp-lobby .sp-mode.is-soon { border: 2px dashed var(--line); }
/* 限时开放: a small peach flag on the top edge of the modes with an AI partner. */
.sp-lobby .sp-mode-flag {
    position: absolute;
    top: -9px;
    right: 12px;
    z-index: 1;
    padding: 0 8px;
    border-radius: 999px;
    background: #ffe3d3;
    color: #b4531c;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

/* English has four modes: one row of four on wide screens, 2 × 2 on phones. */
.sp-lobby .sp-modes[data-lang="en"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
    .sp-lobby .sp-modes[data-lang="en"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Topic button ---------- */
.sp-lobby .sp-topic { align-items: stretch; margin-top: 16px; animation: sp-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-topic-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px 10px 10px;
    border: 0;
    border-radius: 20px;
    background: var(--soft);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}
.sp-topic-btn:hover { background: #f1eee9; }
.sp-topic-btn.is-picked .sp-topic-ico { animation: spl-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sp-topic-ico, .sp-pick-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--tint);
    color: var(--tint-ink);
    transition: background 0.25s, color 0.25s;
}
.sp-topic-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sp-topic-text small { color: var(--muted); font-size: 12px; }
.sp-topic-text strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.sp-topic-chev { color: var(--muted); }

/* ---------- Start button ---------- */
/* Sits in the page flow after the topic picker; layout B's floating (sticky) button covered the tiles on phones. */
.sp-lobby .sp-start-btn { position: relative; bottom: auto; border-color: transparent; background: var(--tone-btn); color: var(--tone-btn-ink); }
.sp-lobby .sp-start-btn:hover { background: var(--tone-btn-hover); }

/* ---------- Topic sheet ----------
   The <dialog> itself is a full-screen, transparent layer: its ::before is
   the dim overlay and .sp-sheet-panel is the card. Both are animated as
   plain elements — ::backdrop animations aren't reliable (Safari skips the
   closing one, so the dark layer used to snap away while the card faded). */
.sp-sheet {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
    /* clip, not just hidden: a hidden box can still be scrolled by focus, which made the sheet overshoot. */
    overflow: clip;
}
.sp-sheet-panel:focus { outline: none; }
.sp-sheet[open] { display: flex; align-items: center; justify-content: center; }
.sp-sheet::backdrop { background: transparent; }
.sp-sheet::before { content: ""; position: fixed; inset: 0; background: rgba(31, 29, 26, 0.32); animation: spl-fade-in 0.25s ease both; }
.sp-sheet.is-closing::before { animation: spl-fade-out 0.2s ease both; }
.sp-sheet-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(720px, 86dvh);
    min-height: 0;
    border-radius: 26px;
    background: var(--surface, #fff);
    overflow: hidden;
    animation: spl-pop-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sp-sheet.is-closing .sp-sheet-panel { animation: spl-pop-out 0.18s cubic-bezier(0.4, 0, 1, 1) both; }
.sp-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 8px 22px; }
.sp-sheet-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.sp-sheet-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--soft); color: var(--muted); cursor: pointer; }
.sp-sheet-close:hover { background: #efece7; }

/* The head and the chip row keep their height; only the list scrolls. (The chip row
   scrolls sideways, so as a flex item it could otherwise be squashed when the list is long.) */
.sp-sheet-head, .sp-sheet-chips { flex: none; }
.sp-sheet-chips { display: flex; gap: 6px; padding: 6px 18px 12px; overflow-x: auto; scrollbar-width: none; }
.sp-sheet-chips::-webkit-scrollbar { display: none; }
.sp-chip {
    flex: none;
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--soft);
    color: #5f5a53;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.sp-chip small { margin-left: 2px; opacity: 0.6; font-weight: 500; }
.sp-chip.is-active { background: var(--tint, var(--tone)); color: var(--tint-ink, var(--tone-ink)); }
.sp-chip[data-filter="all"].is-active { background: var(--tone); color: var(--tone-ink); }

.sp-sheet-body { flex: 1; min-height: 0; padding: 0 12px 18px; overflow-y: auto; overscroll-behavior: contain; }
.sp-sheet-group { margin-top: 14px; animation: sp-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-sheet-group[hidden] { display: none; }
.sp-sheet-group h3 { display: flex; align-items: center; gap: 6px; margin: 0 10px 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.sp-sheet-group h3 .material-symbols-outlined { --icon-size: 16px; font-size: 16px; }

.sp-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 18px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.sp-pick[hidden] { display: none; }
.sp-pick:hover { background: var(--soft); }
.sp-pick.is-selected { background: var(--tone); }
.sp-pick-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sp-pick-text strong { font-size: 15px; font-weight: 600; line-height: 1.35; }
.sp-pick-text small { color: var(--muted); font-size: 12px; }
.sp-pick-check { color: var(--tone-ink); opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sp-pick.is-selected .sp-pick-check { opacity: 1; transform: scale(1); }
.sp-pick.is-random { margin-top: 2px; }

/* ---------- History ---------- */
.sp-history-page .sp-history { margin-top: 22px; }
.sp-history-page .sp-hist-groups { padding-bottom: 24px; }
.sp-lobby .sp [data-lang]:is(.sp-stats, .sp-empty, .sp-hist-group) { display: none; }
.sp-lobby .sp[data-lang="en"] [data-lang="en"].sp-stats,
.sp-lobby .sp[data-lang="ms"] [data-lang="ms"].sp-stats { display: grid; }
.sp-lobby .sp[data-lang="en"] [data-lang="en"].sp-empty,
.sp-lobby .sp[data-lang="ms"] [data-lang="ms"].sp-empty { display: flex; }
.sp-lobby .sp[data-lang="en"] [data-lang="en"].sp-hist-group,
.sp-lobby .sp[data-lang="ms"] [data-lang="ms"].sp-hist-group { display: block; }

.sp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; animation: sp-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: 20px; background: var(--soft); }
.sp-stats strong { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sp-stats strong small { margin-left: 1px; color: var(--muted); font-size: 13px; font-weight: 600; }
.sp-stats span { color: var(--muted); font-size: 12px; }

.sp-lobby .sp-empty { flex-direction: column; align-items: center; gap: 8px; padding: 28px 0; text-align: center; }
.sp-lobby .sp-empty p { margin: 0; }
.sp-lobby .sp-empty .sp-start-btn { margin-top: 10px; }
.sp-lobby .sp-empty .material-symbols-outlined { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tone); color: var(--tone-ink); --icon-size: 24px; font-size: 24px; }

.sp-hist-list { display: flex; flex-direction: column; gap: 6px; }
.sp-hist {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border-radius: 20px;
    background: var(--soft);
    color: inherit;
    text-decoration: none;
    animation: sp-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: background 0.2s, transform 0.2s;
}
.sp-hist:hover { background: #f1eee9; }
.sp-hist:active { transform: scale(0.99); }


.sp-hist-main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.sp-hist-title { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sp-hist-meta { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

@keyframes spl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spl-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* Desktop: a centred card that grows in and shrinks away. */
@keyframes spl-pop-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes spl-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.97); } }
/* Phones: a bottom sheet that slides all the way in and out, no fading. */
@keyframes spl-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes spl-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes spl-pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

@media (max-width: 720px) {
    /* Bottom sheet on phones. */
    .sp-sheet { padding: 0; }
    .sp-sheet[open] { align-items: flex-end; }
    /* The iOS sheet curve: a visible glide up from the bottom edge (the old curve did
       nearly all its moving in the first frames and read as a pop). */
    .sp-sheet-panel { width: 100%; max-height: 88dvh; border-radius: 26px 26px 0 0; animation: spl-sheet-in 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
    .sp-sheet.is-closing .sp-sheet-panel { animation: spl-sheet-out 0.3s cubic-bezier(0.32, 0, 0.67, 0) both; }
    /* The topics ride up with the sheet instead of fading in on their own. */
    .sp-sheet-group { animation: none; }
    .sp-sheet-body { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .sp-sheet-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #e2ded8; }
    .sp-sheet-head { position: relative; padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-sheet::before, .sp-sheet-panel, .sp-topic-ico { animation: none !important; }
}

/* Under the 口试练习 heading: what can be practised (speaking/index). */
.sp-hero .sp-hero-sub { max-width: 520px; margin: 8px auto 0; color: var(--muted, #8a857d); font-size: 14px; line-height: 1.6; }

/* Plus-only modes (SpeakingPractice::plusLocked): dashed peach outline, faded
   title, a "升级 Plus 解锁" pill in place of the time; links to the upgrade page. */
.sp-lobby .sp-mode.is-locked { position: relative; background: transparent; border: 1.5px dashed #f3c2ad; }
.sp-lobby .sp-mode.is-locked:hover { background: #fff6f1; }
.sp-lobby button.sp-mode.is-locked { width: 100%; font: inherit; color: inherit; cursor: pointer; }
.sp-lobby .sp-mode.is-locked strong { opacity: 0.5; }
.sp-lobby .sp-mode-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 10px;
    border-radius: 999px;
    background: #ffe3d3;
    color: #b4531c;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}
.sp-lobby .sp-mode-cta .material-symbols-outlined { --icon-size: 14px !important; font-size: 14px !important; font-variation-settings: 'FILL' 1; }

/* Explainer a locked tile opens: a looping mock chat (speaking-lobby.js steps it) in a plain
   white box, then title, line and Upgrade, left-aligned. */
.sp-info .sp-sheet-panel { width: min(420px, 100%); }
.sp-info .sp-sheet-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(255, 255, 255, 0.8); }
.spi-stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    height: 220px;
    margin: 12px 12px 0;
    padding: 16px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}
.spi-row { display: flex; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.spi-row.is-on { opacity: 1; transform: none; }
.spi-row.is-me { justify-content: flex-end; }
.spi-bubble { max-width: 82%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #f4f2ef; font-size: 13px; line-height: 1.45; text-align: left; }
.spi-bubble small { display: flex; align-items: center; gap: 4px; margin-bottom: 1px; color: var(--muted); font-size: 11px; font-weight: 600; }
.spi-bubble small em { padding: 0 5px; border-radius: 999px; background: #ffe3d3; color: #b4531c; font-size: 9.5px; font-style: normal; font-weight: 800; line-height: 15px; }
.spi-row.is-me .spi-bubble { display: flex; align-items: center; gap: 8px; border-radius: 16px 16px 4px 16px; background: #ffe9e0; }
.spi-text { display: none; }
.spi-row.is-said .spi-text { display: inline; }
.spi-dots { display: inline-flex; gap: 3px; padding: 4px 0; }
.spi-row.is-said .spi-dots { display: none; }
.spi-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d8b5a6; animation: spi-dot 1s infinite ease-in-out; }
.spi-dots i:nth-child(2) { animation-delay: 0.15s; }
.spi-dots i:nth-child(3) { animation-delay: 0.3s; }
.spi-wave { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.spi-wave i { width: 3px; height: 6px; border-radius: 2px; background: #a2462a; animation: spi-wave 0.9s infinite ease-in-out; }
.spi-wave i:nth-child(2n) { animation-delay: 0.2s; }
.spi-wave i:nth-child(3n) { animation-delay: 0.4s; }
.spi-celah { padding: 0 8px; border-radius: 999px; background: #fff; color: #a2462a; font-size: 11px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.spi-body { padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); }
.spi-body h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.spi-body p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.spi-upgrade { display: flex; justify-content: center; width: 100%; min-height: 48px; border-color: transparent; background: var(--tone-btn); color: var(--tone-btn-ink); text-decoration: none; white-space: nowrap; }
.spi-upgrade:hover { background: var(--tone-btn-hover); }

@keyframes spi-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes spi-wave { 0%, 100% { height: 6px; } 50% { height: 18px; } }
@media (prefers-reduced-motion: reduce) {
    .spi-row { transition: none; }
    .spi-dots i, .spi-wave i { animation: none; }
}