/* focus-calm.css — 2026-10-16 redesign (Audi: "ไม่ให้ดูเป็นหน้าที่มีแต่กล่องสี่เหลี่ยมเหมือน AI ทำ").
   Loaded after focus-modes.css. Layout + surface only: no class/ID renames, JS untouched.
   Each mode keeps its colour: 🎯 โฟกัส = green · 🫧 นั่งสมาธิ = purple · 🌐 คอมมูนิตี้ = blue.
   Idea: the timer / breath orb is the hero object on a mode-coloured glow, controls are pills,
   lists are hairline rows. Only the leaderboard keeps one distinct surface. */

body {
    --mode: #4dd2a0;
    --mode-soft: #7eebc2;
    --mode-rgb: 77, 210, 160;
    --mode-ink: #04140f;
    --calm-line: rgba(255, 255, 255, 0.1);
    --calm-chip-line: rgba(255, 255, 255, 0.2);
    --calm-ink-2: #c3cad6;
    background: transparent;
}
html { background: var(--bg, #030712); }
/* Mode glow lives on its own fixed layer so it repaints cleanly when the mode changes. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(var(--mode-rgb), 0.12), transparent 70%),
        radial-gradient(ellipse 45% 35% at 88% 92%, rgba(var(--mode-rgb), 0.06), transparent 70%);
}
body[data-practice-mode="meditation"] {
    --mode: #9f8cff;
    --mode-soft: #c7bcff;
    --mode-rgb: 159, 140, 255;
    --mode-ink: #120c2b;
}
body[data-practice-mode="community"] {
    --mode: #7f8cff;
    --mode-soft: #aab3ff;
    --mode-rgb: 127, 140, 255;
    --mode-ink: #0b0f2e;
}

/* ── Hero: purpose line + mode switch, no tiny tracked eyebrow ── */
#focus-hero,
body[data-practice-mode] #focus-hero {
    background: transparent;
    padding-bottom: 12px;
}
#focus-hero .hero-eyebrow { display: none; }
#focus-hero .hero-brand {
    color: var(--mode-soft);
    letter-spacing: 0;
    text-wrap: balance;
    transition: color 0.4s ease;
}
#focus-hero .mode-tabs {
    border-radius: 999px;
    border: 1px solid var(--calm-line);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
}
#focus-hero .mode-tab { border-radius: 999px; }
#focus-hero .mode-tab:not(.active):hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

/* ── Solo layout: fix the 90px offset that pushed the timer into the sound deck ── */
#focus-app { padding-top: 8px; }
@media (min-width: 769px) {
    #solo-panel.active {
        grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
        column-gap: clamp(24px, 4vw, 56px);
        row-gap: 40px;
    }
}
#focus-app .timer-container {
    top: 0;
    align-self: start;
    border: 0;
    border-radius: 0;
    padding: 8px 0 0;
    gap: 18px;
    background: radial-gradient(circle at 50% 48%, rgba(var(--mode-rgb), 0.15), transparent 58%);
}
#focus-app .focus-work-entry { width: min(100%, 460px); text-align: center; }
#focus-app .focus-work-label {
    font: 600 1.15rem var(--font-head);
    color: var(--text);
    margin-bottom: 4px;
}
#focus-app .focus-work-entry #task-input {
    min-height: 52px;
    border: 0;
    border-bottom: 2px solid rgba(var(--mode-rgb), 0.38);
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: 1.15rem;
    padding-inline: 8px;
}
#focus-app .focus-work-entry #task-input:focus {
    border-bottom-color: var(--mode);
    background: rgba(var(--mode-rgb), 0.05);
}
#focus-app .focus-work-entry .task-input-wrap { margin-bottom: 6px; }
#focus-app .task-support { margin-top: 4px; color: var(--calm-ink-2); }

#focus-app .timer-ring-wrap {
    width: clamp(240px, 24vw, 300px);
    height: clamp(240px, 24vw, 300px);
}
#focus-app .timer-ring-wrap svg { width: 100%; height: 100%; }
#focus-app #ring-bg { stroke: rgba(255, 255, 255, 0.07); }
#focus-app #timer-display { font-size: clamp(3.4rem, 5vw, 4.6rem); }
#focus-app #timer-mode-label { letter-spacing: 1px; text-transform: none; font-size: 0.85rem; }

#focus-app .ctrl-btn { border-radius: 999px; }
#focus-app .ctrl-btn.secondary {
    background: transparent;
    border: 1px solid var(--calm-chip-line);
    color: var(--text);
}
#focus-app .ctrl-btn.secondary:hover { border-color: rgba(var(--mode-rgb), 0.6); background: rgba(var(--mode-rgb), 0.08); }

#focus-app .focus-session-options { width: min(100%, 460px); }
#focus-app .focus-time-settings > summary { border-radius: 999px; }
#focus-app .focus-view-toggle {
    border-radius: 999px;
    border: 1px solid var(--calm-chip-line);
    background: transparent;
    color: var(--text);
}
#focus-app .kbd-hint { color: var(--calm-ink-2); }

/* ── Sidebar: numbers sit on the page, leaderboard is the one sheet ── */
#focus-app .focus-sidebar { gap: 22px; }
#focus-app .focus-sidebar > .stats-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    row-gap: 6px;
    column-gap: 18px;
}
#focus-app .focus-sidebar > .stats-section .stat-item {
    min-height: 0;
    padding: 6px 0 12px;
    align-items: flex-start;
    text-align: left;
    border: 0 !important;
    border-bottom: 1px solid var(--calm-line) !important;
}
#focus-app .focus-sidebar > .stats-section .stat-label { color: var(--calm-ink-2); font-size: 0.82rem; }
#focus-app .focus-sidebar > .stats-section .stat-value { font-size: 1.55rem; color: var(--text); }
#focus-app .focus-sidebar > .stats-section .stat-sub { color: var(--mode-soft); }

#focus-app .leaderboard-section {
    border: 1px solid rgba(var(--mode-rgb), 0.24);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--mode-rgb), 0.09), rgba(13, 22, 34, 0.94) 42%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
#focus-app .lb-tabs { border-radius: 999px; }
#focus-app .lb-tab { border-radius: 999px; }

#focus-app .task-section,
#focus-app .quote-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-top: 1px solid var(--calm-line);
}
#focus-app .focus-history-details { margin-top: 0; border-top: 0; }
#focus-app .quote-card #quote-view { min-height: 52px; }
#focus-app .quote-card .quote-text { color: var(--calm-ink-2); font-style: italic; }

/* ── Sound deck: one open band, chips instead of a grid of boxes ── */
#focus-app .sounds-section {
    border: 0;
    border-top: 1px solid var(--calm-line);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
#focus-app .atmosphere-head { padding: 28px 0 12px; }
#focus-app .atmosphere-head .focus-section-title::before { content: "🎧 "; }
#focus-app .mixer-stop-all {
    border-radius: 999px;
    border: 1px solid var(--calm-chip-line);
    background: transparent;
    color: var(--text);
}
#focus-app .sounds-section .mixer-group {
    border-top: 0;
    background: transparent;
    padding: 18px 26px 22px 0;
}
#focus-app .sounds-section .mixer-group + .mixer-group {
    padding-left: 26px;
    border-left: 1px solid var(--calm-line);
}
#focus-app .mixer-group--scene {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--calm-line) !important;
}
#focus-app .mixer-step {
    background: rgba(var(--mode-rgb), 0.12);
    border-radius: 999px;
}
#focus-app .mixer-source-state {
    border-radius: 999px;
    padding: 2px 10px;
    border: 1px solid var(--calm-line);
    color: var(--calm-ink-2);
}
#focus-app .music-presets { display: flex; flex-wrap: wrap; gap: 8px; }
#focus-app .music-btn,
#focus-app .ambient-toggle,
#focus-app .beat-btn,
#focus-app .bg-ctrl-btn {
    border-radius: 999px;
    border: 1px solid var(--calm-chip-line);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    min-height: 44px;
    padding-inline: 18px;
    width: auto;
}
#focus-app .music-btn:hover,
#focus-app .ambient-toggle:hover,
#focus-app .beat-btn:hover { border-color: rgba(var(--mode-rgb), 0.6); background: rgba(var(--mode-rgb), 0.08); }
#focus-app .music-btn.active,
#focus-app .music-btn[aria-pressed="true"],
#focus-app .ambient-toggle[aria-pressed="true"],
#focus-app .beat-btn.active {
    border-color: var(--mode);
    background: rgba(var(--mode-rgb), 0.18);
    color: var(--mode-soft);
    box-shadow: 0 0 0 1px rgba(var(--mode-rgb), 0.35) inset;
}
#focus-app .bg-ctrl-btn.danger { border-color: rgba(255, 107, 107, 0.45); color: #ff8f8f; }
#focus-app .ambient-row { border: 0; background: transparent; }
#focus-app .bg-url-row input,
#focus-app .yt-url-row input {
    border-radius: 999px;
    border: 1px solid var(--calm-chip-line);
    background: rgba(255, 255, 255, 0.03);
    padding-inline: 18px;
}
#focus-app #bg-set-btn,
#focus-app #yt-load-btn,
#focus-app #spotify-load-btn { border-radius: 999px; }
#focus-app .mixer-persistence-note {
    background: transparent;
    border-top: 0;
    padding: 4px 0 0;
    color: var(--calm-ink-2);
}
#focus-app .session-ticker { border: 0; background: transparent; padding: 0; }
#focus-app .ticker-label { color: var(--calm-ink-2); }

/* ── Meditation: breath orb is the scene, settings are an open column ── */
#focus-app .meditation-shell { gap: clamp(24px, 4vw, 56px); }
#focus-app .meditation-timer-card {
    border: 0;
    border-radius: 0;
    padding: 4px 0 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--mode-rgb), 0.16), transparent 60%);
    box-shadow: none;
}
#focus-app .meditation-card-head h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
#focus-app .meditation-local-badge {
    border-radius: 999px;
    border: 1px solid var(--calm-line);
    padding: 3px 12px;
    color: var(--calm-ink-2);
}
#focus-app .meditation-routines h3 { color: var(--calm-ink-2); }
#focus-app .meditation-routine-list { display: flex; flex-wrap: wrap; gap: 8px; }
#focus-app .meditation-routine,
#focus-app .meditation-preset,
#focus-app .meditation-sound,
#focus-app .meditation-choice {
    border-radius: 999px;
    border: 1px solid var(--calm-chip-line);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    min-height: 44px;
}
#focus-app .meditation-routine {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 8px 18px;
    width: auto;
}
#focus-app .meditation-routine small { color: var(--calm-ink-2); }
#focus-app .meditation-routine:hover,
#focus-app .meditation-preset:hover,
#focus-app .meditation-sound:hover,
#focus-app .meditation-choice:hover { border-color: rgba(var(--mode-rgb), 0.6); background: rgba(var(--mode-rgb), 0.08); }
#focus-app .meditation-routine[aria-pressed="true"],
#focus-app .meditation-preset.active,
#focus-app .meditation-sound.active,
#focus-app .meditation-choice.active {
    border-color: var(--mode);
    background: rgba(var(--mode-rgb), 0.18);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(var(--mode-rgb), 0.35) inset;
}
#focus-app .meditation-stage { min-height: 320px; }
#focus-app .meditation-custom {
    border-radius: 999px;
    border: 1px solid var(--calm-line);
    background: transparent;
}
#focus-app .meditation-button { border-radius: 999px; }
#focus-app .meditation-button.secondary {
    background: transparent;
    border: 1px solid var(--calm-chip-line);
    color: var(--text);
}

#focus-app .meditation-options {
    border: 0;
    border-left: 1px solid var(--calm-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 4px 0 4px clamp(20px, 3vw, 36px);
}
#focus-app .meditation-option-block {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--calm-line);
}
#focus-app .meditation-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
#focus-app .meditation-choice {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-align: left;
}
#focus-app .meditation-choice small { display: none; }
#focus-app .meditation-choice span { font-size: 1rem; }
#focus-app .meditation-sounds { display: flex; flex-wrap: wrap; gap: 8px; }
#focus-app .meditation-sound { padding: 6px 16px; width: auto; }
#focus-app .meditation-options select {
    border-radius: 999px;
    border: 1px solid var(--calm-chip-line);
    background-color: rgba(255, 255, 255, 0.03);
}
#focus-app .meditation-note {
    border: 0;
    background: transparent;
    padding: 4px 0 0;
}
#focus-app .meditation-note strong::before { content: "🫧 "; }
#focus-app .meditation-note p { color: var(--calm-ink-2); font-style: italic; }

#focus-app .meditation-analytics {
    border: 0;
    border-top: 1px solid var(--calm-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 28px 0 0;
    margin-top: 40px;
}
#focus-app .meditation-analytics-head h2::before { content: "🌙 "; }
#focus-app .meditation-stats { border: 0; border-radius: 0; background: transparent; gap: 18px; }
#focus-app .meditation-stat {
    border: 0 !important;
    border-bottom: 1px solid var(--calm-line) !important;
    background: transparent;
    padding: 6px 0 12px;
}
#focus-app .meditation-stat strong { font-size: 1.45rem; }
#focus-app .meditation-stat small { color: var(--mode-soft); }
#focus-app .meditation-recent-list { border: 0; background: transparent; }
#focus-app .meditation-recent-empty {
    background: transparent;
    border: 1px dashed var(--calm-line);
    border-radius: 12px;
    color: var(--calm-ink-2);
}

/* ── Community: open scene, connected steps ── */
#focus-app .community-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
#focus-app .community-hero {
    background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(var(--mode-rgb), 0.16), transparent 72%);
    padding-top: 12px;
}
#focus-app .community-kicker { display: none; }
#focus-app .community-hero img {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(var(--mode-rgb), 0.35);
}
#focus-app .btn-discord { border-radius: 999px; }
#focus-app .community-benefits {
    background: transparent;
    border-block: 0;
    gap: 0;
    margin-top: 28px;
}
#focus-app .community-benefits > div {
    background: transparent;
    padding: 8px 28px;
}
#focus-app .community-benefits > div + div { border-left: 1px solid var(--calm-line); }
#focus-app .community-benefits span {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(var(--mode-rgb), 0.14);
    font-size: 1.35rem;
    margin-bottom: 10px;
}
#focus-app .community-benefits p { color: var(--calm-ink-2); }
#focus-app .community-flow {
    background: transparent;
    border-top: 1px solid var(--calm-line);
    margin-top: 32px;
}
#focus-app .community-flow-label { font-size: 1rem; color: var(--text); letter-spacing: 0; text-transform: none; }
#focus-app .community-flow ol { position: relative; }
#focus-app .community-flow li > span {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--mode);
    color: var(--mode-ink);
    font-weight: 700;
    border: 0;
    position: relative;
    z-index: 1;
}
#focus-app .community-flow p { color: var(--text); }

/* ── YouTube background active: give text a readable scrim instead of floating over video ── */
body.bg-active #focus-app .timer-container,
body.bg-active #focus-app .focus-sidebar,
body.bg-active #focus-app .sounds-section {
    background: rgba(3, 7, 18, 0.74);
    border-radius: 18px;
    padding: 18px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    #solo-panel.active { row-gap: 28px; }
    #focus-app .timer-ring-wrap { width: 240px; height: 240px; }
    #focus-app .focus-sidebar > .stats-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #focus-app .sounds-section .mixer-group,
    #focus-app .sounds-section .mixer-group + .mixer-group {
        padding: 18px 0;
        border-left: 0;
        border-top: 1px solid var(--calm-line);
    }
    #focus-app .meditation-options {
        border-left: 0;
        border-top: 1px solid var(--calm-line);
        padding: 22px 0 0;
    }
    #focus-app .meditation-stats { gap: 12px; }
    #focus-app .community-benefits > div { padding: 16px 0; }
    #focus-app .community-benefits > div + div { border-left: 0; border-top: 1px solid var(--calm-line); }
}

@media (prefers-reduced-motion: reduce) {
    #focus-hero .hero-brand { transition: none; }
}

/* Small notes stay readable on the dark scene (≥4.5:1). */
#focus-app .mixer-experimental p,
#focus-app .community-card > p,
#focus-app .community-note,
#focus-app .community-card .community-footnote { color: var(--calm-ink-2); }

/* Breath orb reads as the focal object, not a dim circle (cold-read 2026-10-16). */
#focus-app .meditation-orbit {
    border-color: rgba(199, 188, 255, 0.38);
    background: radial-gradient(circle, rgba(159, 140, 255, 0.22), transparent 66%);
    box-shadow: 0 0 60px rgba(159, 140, 255, 0.18);
}
#focus-app .meditation-breath-core {
    background: radial-gradient(circle at 35% 30%, rgba(240, 237, 255, 0.26), rgba(159, 140, 255, 0.2) 52%, rgba(159, 140, 255, 0.06));
}
#focus-app .meditation-clock > span { color: #ddd6ff; }
#focus-app .meditation-clock small { color: #d4d0e6; }

/* ── 2026-10-16 round 2 (Audi: "หน้าจอมันดูไม่ได้กว้างพอ ตัวหนังสือชิดกันเกินไป dropdown อ่านไม่ออก") ── */

/* 📏 Use the screen: wider container on big monitors, then proportional zoom tiers (quality §0.5). */
@media (min-width: 1600px) {
    #focus-app { max-width: 1480px; }
    #solo-panel.active { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr); }
}
@media (min-width: 1900px) {
    #focus-hero .hero-content, #focus-app { zoom: 1.14; }
}
@media (min-width: 2300px) {
    #focus-hero .hero-content, #focus-app { zoom: 1.3; }
}

/* 🔢 Stats: always 2 x 2 so every number has room; a value never breaks across lines. */
#focus-app .focus-sidebar > .stats-section { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 28px; row-gap: 14px; }
#focus-app .stat-value { white-space: nowrap; line-height: 1.25; }
#focus-app .stat-label,
#focus-app .stat-sub { line-height: 1.6; }
#focus-app .stat-label { white-space: nowrap; }

/* 🔤 Thai needs air: multi-line Thai never below 1.5, headings 1.4. */
#focus-app p,
#focus-app small,
#focus-app .session-dots-caption,
#focus-app .kbd-hint,
#focus-app .task-support,
#focus-app .amb-name,
#focus-app .community-benefits p,
#focus-app .meditation-note p { line-height: 1.7; }
#focus-app h2,
#focus-app h3,

#focus-app .session-dots-caption { margin-top: 12px; }
#focus-app .lb-tab { white-space: nowrap; }
@media (max-width: 360px) {
    #focus-app .lb-tab { padding-inline: 8px; font-size: 0.8rem; }
}

/* ⬇️ Native dropdowns: dark popup list, solid background (a translucent select falls back to a white list). */
#focus-app select {
    color-scheme: dark;
    background-color: #131c2e !important;
    color: #eef1f7;
}
#focus-app select option,
#focus-app select optgroup { background-color: #131c2e; color: #eef1f7; }
#focus-app select option:checked { background-color: #3b3270; color: #ffffff; }
#focus-app select:hover { border-color: rgba(var(--mode-rgb), 0.6); }
#focus-app .community-hero h2 { line-height: 1.45; }

/* ── 2026-10-16 round 3 composition (Audi: "ระหว่างกดเริ่มไปแล้วมันเลือกเพลงอื่นไม่ได้หรอ", leaderboard
   placement, background video takes too much room → under 🌿 เสียงรอบตัว).
   Row 1 = what you touch while working: ⏱️ timer | 🎧 sound deck (music → ambient → video, stacked).
   Row 2 = progress and people: 📊 your stats + history + note | 🏆 leaderboard. ── */
@media (min-width: 1024px) {
    #solo-panel.active {
        grid-template-areas:
            "timer atmosphere"
            "sidebar sidebar"
            "ticker ticker";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(32px, 4vw, 64px);
        row-gap: 48px;
    }
    #focus-app .sounds-section { border-top: 0; align-self: start; }
    #focus-app .atmosphere-head { padding-top: 0; }
    #focus-app .focus-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "stats leaderboard"
            "task leaderboard"
            "quote leaderboard";
        align-content: start;
        column-gap: clamp(32px, 4vw, 64px);
        row-gap: 0;
        padding-top: 32px;
        border-top: 1px solid var(--calm-line);
    }
    #focus-app .focus-sidebar > .stats-section { grid-area: stats; margin-bottom: 18px; }
    #focus-app .focus-sidebar > .leaderboard-section { grid-area: leaderboard; align-self: start; }
    #focus-app .focus-sidebar > .task-section { grid-area: task; }
    #focus-app .focus-sidebar > .quote-card { grid-area: quote; }
}

/* 🎧 Sound deck: one column, music → ambient → video. */
#focus-app .mixer-editors { grid-template-columns: minmax(0, 1fr); }
#focus-app .sounds-section .mixer-group,
#focus-app .sounds-section .mixer-group + .mixer-group {
    padding: 18px 0 20px;
    border-left: 0;
    border-top: 1px solid var(--calm-line);
}
#focus-app .mixer-editors .music-presets { display: flex; flex-wrap: wrap; gap: 8px; }
#focus-app .mixer-editors .ambient-list { gap: 8px 10px; }
#focus-app .mixer-editors .ambient-toggle { min-height: 48px; }

/* 🎬 Background video: a slim row under ambient sounds, not a whole section. */
#focus-app .mixer-group--scene { gap: 10px !important; padding-top: 14px !important; padding-bottom: 6px !important; }
#focus-app .mixer-group--scene .mixer-group-head small { display: none; }
#focus-app .mixer-group--scene .mixer-group-head h3 { font-size: 0.95rem; }
#focus-app .mixer-group--scene .mixer-step { width: 32px; height: 32px; font-size: 0.95rem; }
#focus-app .bg-url-row input { min-height: 42px; }
#focus-app #bg-set-btn { min-height: 42px; padding-inline: 18px; }
#focus-app .mixer-persistence-note { font-size: 0.8rem; padding-top: 10px; }

/* ⏱️ While the timer runs (quiet view): keep a compact sound deck under the timer so music can change mid-session. */
body[data-practice-mode="solo"][data-focus-view="quiet"] #solo-panel > .sounds-section {
    display: block !important;
    grid-area: auto;
    width: min(100%, 620px);
    margin: 8px auto 0;
    padding: 18px 22px 8px;
    border: 1px solid var(--calm-line);
    border-radius: 16px;
    background: rgba(8, 14, 24, 0.82);
}
body[data-practice-mode="solo"][data-focus-view="quiet"] #solo-panel.active {
    grid-template-areas: "timer" "atmosphere";
}
body[data-focus-view="quiet"] #focus-app .atmosphere-head { padding: 0 0 6px; }
body[data-focus-view="quiet"] #focus-app .atmosphere-head p,
body[data-focus-view="quiet"] #focus-app .mixer-group-head small,
body[data-focus-view="quiet"] #focus-app .mixer-group--scene,
body[data-focus-view="quiet"] #focus-app .mixer-source-details,
body[data-focus-view="quiet"] #focus-app .mixer-experimental,
body[data-focus-view="quiet"] #focus-app .mixer-persistence-note { display: none; }
body[data-focus-view="quiet"] #focus-app .atmosphere-head .focus-section-title { font-size: 1.05rem; }
body[data-focus-view="quiet"] #focus-app .sounds-section .mixer-group { padding: 12px 0; }

/* Running view on wide screens: sound deck beside the timer, never below the fold (cold read 2026-10-16). */
@media (min-width: 1024px) {
    body[data-practice-mode="solo"][data-focus-view="quiet"] #solo-panel.active {
        grid-template-areas: "timer atmosphere";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: 1180px;
        align-items: center;
    }
    body[data-practice-mode="solo"][data-focus-view="quiet"] #solo-panel > .sounds-section {
        grid-area: atmosphere;
        width: 100%;
        margin: 0;
    }
}

/* ── 2026-10-16 round 4 polish (Audi: "ทำเลย") ── */
/* 👥 Friends' recent rounds: one short row on phones (3 newest), not a tall list. */
@media (max-width: 768px) {
    #focus-app .ticker-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    #focus-app .ticker-pills .ticker-pill:nth-child(n+4) { display: none !important; }
    #focus-app .ticker-pill { padding: 6px 12px; font-size: 0.8rem; }
    #focus-app .session-ticker { margin-top: 4px; }
}
/* 🔤 Hint lines under the timer: readable size and ink, not tiny grey. */
#focus-app .session-dots-caption { font-size: 0.85rem; color: var(--calm-ink-2); max-width: 52ch; }
#focus-app .kbd-hint { font-size: 0.82rem; color: var(--calm-ink-2); letter-spacing: 0; }
#focus-app .kbd-hint kbd { font-size: 0.78rem; color: var(--text); border-color: var(--calm-chip-line); padding: 1px 6px; }
#focus-app .mixer-experimental > summary { font-size: 0.85rem; color: var(--calm-ink-2); }
/* Faint leftovers from the cold read: time-ago, reminder placeholder, rounds-this-visit line. */
#focus-app .ticker-pill .t-ago { opacity: 1; color: var(--calm-ink-2); }
#focus-app .quote-card .quote-text { color: #d6dbe5; }
#focus-app #session-info { color: var(--calm-ink-2); font-size: 0.85rem; }

/* ☀️ "วันนี้ ↓" jump link under the timer + a flash on the today stat it lands on. */
#focus-app .today-jump {
    color: var(--mode-soft);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
#focus-app .today-jump:hover { color: #fff; }
#focus-app .today-jump:focus-visible { outline: 2px solid var(--mode); outline-offset: 3px; border-radius: 4px; }
#focus-app #focus-today-stat { border-radius: 12px; transition: background-color 0.4s ease, box-shadow 0.4s ease; }
#focus-app #focus-today-stat:focus { outline: none; }
#focus-app #focus-today-stat.is-flash {
    background-color: rgba(var(--mode-rgb), 0.16);
    box-shadow: 0 0 0 2px rgba(var(--mode-rgb), 0.7);
}
@media (prefers-reduced-motion: reduce) {
    #focus-app #focus-today-stat { transition: none; }
}
/* On phones the dot legend is hidden; keep the today link reachable there too. */
@media (max-width: 768px) {
    #focus-app .timer-container .session-dots-caption { display: block; font-size: 0.82rem; }
}
#focus-app #focus-today-stat { padding-inline: 10px; margin-inline: -10px; }

/* ── 2026-10-17 small fixes kept from the desk experiment (look unchanged; Audi preferred the green/purple design) ── */
/* newcomers: a first step instead of 0 รอบ · 0 วัน · 0 นาที */
#focus-app .focus-sidebar > .stats-section.is-fresh > .stat-item,
#focus-app .focus-sidebar > .stats-section.is-fresh > .stat-divider { display: none; }
#focus-app .focus-sidebar > .stats-section.is-fresh::before { content: "🌱 ยังไม่มีสถิติ"; grid-column: 1 / -1; font: 600 1.15rem var(--font-head); color: var(--mode-soft); }
#focus-app .focus-sidebar > .stats-section.is-fresh::after { content: "กด ▶ เริ่มโฟกัส รอบแรก แล้ววันนี้ ความต่อเนื่อง และระดับของคุณจะเริ่มนับตรงนี้"; grid-column: 1 / -1; line-height: 1.7; color: var(--calm-ink-2); }
/* meditation: the glow core sits behind the 05:00 text (bug sweep: text was covered) */
#focus-app .meditation-breath-core { z-index: 0; pointer-events: none; }
#focus-app .meditation-clock { z-index: 2; }
/* dark dropdowns stay solid so the open list is readable */
html:not([data-theme=light]) #focus-app .meditation-options select { background-color: #1a1636; color-scheme: dark; }
html[data-theme=light] #focus-app .focus-sidebar > .stats-section.is-fresh::before { color: #0f5e44; }
html[data-theme=light] #focus-app .focus-sidebar > .stats-section.is-fresh::after { color: #34405a; }

/* 12d: emoji sit bare, no box behind them on any page (Audi 2026-10-18: "จำไว้ใช้กับทุกหน้าด้วย ไม่มีกล่องหลัง emoji") */
.mixer-step{background:none!important;border-color:transparent!important;box-shadow:none!important;outline:0;font-size:24px!important;line-height:1}