/* The sidebar exists only while picking a set on a roomy desktop. */
.desktop-shell-brand, .desktop-shell-nav, .desktop-shell-label { display: none; }
body.desktop-workspace { --desktop-nav-width: 212.4px; --desktop-nav-reclaimed: 23.6px; }
body.desktop-workspace > .container {
    width: calc(100% - var(--desktop-nav-width));
    max-width: none;
    margin-left: var(--desktop-nav-width);
    padding: 28px 32px;
}
body.desktop-workspace #setupPanel { width: 100%; max-width: 1140px; margin: 0 auto; }
/* Learn + Practise start near the top like any page; centred in the window
   they read as a dialog floating over an empty screen. */
body.desktop-workspace #setupPanel:has(> #step2:not([style*="none"])) { margin-top: 4vh; }
body.desktop-workspace #topBar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--desktop-nav-width);
    height: calc(100dvh / var(--ui-zoom, 1));
    margin: 0;
    padding: 24px 14px 16px;
    border: 0;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-card);
    box-shadow: none;
    z-index: 900;
    overflow-y: auto;
}
body.desktop-workspace #topBar::before { display: none; }
body.desktop-workspace #topBar .top-bar-header {
    height: 100%; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 20px;
}
body.desktop-workspace .desktop-shell-brand {
    display: flex; align-items: center; gap: 10px; padding: 0 8px;
    font: 700 25px/1.3 var(--font-emphasis); color: var(--text-primary);
}
body.desktop-workspace #topBar .learning-context-chip {
    width: 100%; max-width: none; min-height: 58px; padding: 9px 12px;
    border: 1px solid var(--border-color); border-radius: 12px;
}
body.desktop-workspace #topBar .learning-context-chip-copy strong { font-size: 19px; }
body.desktop-workspace #topBar .learning-context-flag { font-size: 28px; }
body.desktop-workspace #topBar .top-bar-right-controls {
    flex: 1; margin: 0; display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start; gap: 6px;
}
body.desktop-workspace #topBar :is(.desktop-shell-nav, .top-bar-icon-btn, .top-bar-gear, .top-bar-user-name) {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    flex: 0 0 auto; width: 100%; max-width: none; min-height: 52px; height: auto;
    margin: 0; padding: 12px 14px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-secondary);
    font: 600 16.5px/1.4 var(--font-reading); text-align: left; cursor: pointer;
}
body.desktop-workspace #topBar :is(.desktop-shell-nav, .top-bar-icon-btn, .top-bar-gear, .top-bar-user-name):hover {
    background: var(--bg-tertiary); color: var(--text-primary);
}
body.desktop-workspace #topBar [aria-current="page"] {
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-card));
    color: var(--text-primary);
}
body.desktop-workspace #topBar button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
body.desktop-workspace #topBar :is(.desktop-shell-nav, .top-bar-icon-btn, .top-bar-gear) svg {
    flex: 0 0 23px; width: 23px; height: 23px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body.desktop-workspace .desktop-shell-label { display: inline; }
body.desktop-workspace #desktopStudyBtn { order: 1; }
body.desktop-workspace #desktopExploreBtn { order: 2; }
body.desktop-workspace #topBar #helpBtn { order: 3; }
body.desktop-workspace #topBarProgressBtn { order: 4; }
body.desktop-workspace #desktopAboutBtn { order: 4; }
body.desktop-workspace #topBarGearBtn { order: 5; margin-top: auto; }
body.desktop-workspace #topBar #topBarUserName { order: 6; border-top: 1px solid var(--border-color); border-radius: 0; padding-top: 16px; }
body.desktop-workspace #topBarUserName.is-icon { width: 100%; justify-content: flex-start; padding: 12px; }
body.desktop-workspace #topBarUserName.is-icon::after { content: 'Account'; }
body.desktop-workspace #topBar :is(#envBadge, #syncStatusIndicator, #progressReadRetry) { order: 7; align-self: flex-start; margin: 4px 12px 0; }
body.desktop-workspace #topBar [hidden] { display: none !important; }
/* These views fill the workspace beside navigation instead of taking a gutter. */
body.desktop-workspace .modal.desktop-workspace-page:is(#settingsModal, #totalStatsModal, #savedWordsModal, #reviewHomeModal, #helpModal, #learningContextModal, #extrasModal, #fastModeModal, #vocabularyImportModal, #extraModal):not(.hidden) {
    left: var(--desktop-nav-width); right: 0; width: auto;
    height: calc(100dvh / var(--ui-zoom, 1));
    padding: 28px 32px; align-items: flex-start; justify-content: center;
    background: var(--bg-primary); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.desktop-workspace .modal.desktop-workspace-page:is(#settingsModal, #totalStatsModal, #savedWordsModal, #reviewHomeModal, #helpModal, #learningContextModal, #extrasModal, #fastModeModal, #vocabularyImportModal, #extraModal) > .modal-content {
    width: 100%; max-width: 1040px; max-height: none; min-height: 0;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: transparent; animation: none;
}
body.desktop-studying #topBar { display: none !important; }
@media (min-width: 1024px) and (max-width: 1279px) {
    body.desktop-workspace > .container { padding: 24px; }
    body.desktop-workspace #setupPanel.file-upload { grid-template-columns: minmax(0, 1fr); }
    body.desktop-workspace #setupPanel.file-upload > #step4 { grid-column: 1; grid-row: auto; }
}

/* The trail: language chip, then vocabulary, then artist or playlist, joined by
   a rail so they read as one path. Each chip switches its own level. */
.learning-context-language-only { display: none; }
body.desktop-workspace #topBar .learning-context-flag[hidden] { display: inline !important; }
body.desktop-workspace #topBar #learningContextPhoto,
body.desktop-workspace #topBar #learningContextLanguage { display: none !important; }
body.desktop-workspace #topBar .learning-context-language-only { display: block; }
.desktop-trail { display: none; }
body.desktop-workspace .desktop-trail {
    display: flex; flex-direction: column; gap: 6px;
    margin: -12px 0 0 16px; padding-left: 10px;
    border-left: 2px solid var(--border-color);
}
body.desktop-workspace .desktop-trail[hidden] { display: none; }
.desktop-trail-chip {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 7px 8px; text-align: left; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--bg-tertiary); color: var(--text-primary);
}
.desktop-trail-chip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color)); }
.desktop-trail-chip:disabled { opacity: .55; cursor: default; }
.desktop-trail-chip[aria-expanded="true"] .desktop-trail-caret { transform: rotate(90deg); }
.desktop-trail-level[data-state="empty"] > .desktop-trail-chip {
    border-style: dashed; background: transparent; color: var(--text-secondary);
}
.desktop-trail-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.desktop-trail-copy small {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 11px var(--font-reading); color: var(--text-secondary);
}
.desktop-trail-copy strong {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 14px var(--font-emphasis);
}
.desktop-trail-icon, .desktop-trail-photo {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-card)) center / cover no-repeat;
    color: var(--accent-primary); font: 700 11px var(--font-emphasis);
}
.desktop-trail-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.desktop-trail-icon:empty { display: none; }
.desktop-trail-icon .desktop-trail-photo { width: 100%; height: 100%; flex: 1 1 auto; border-radius: 0; }
.desktop-trail-caret { color: var(--text-secondary); font-size: 18px; transition: transform .15s ease; }
.desktop-trail-menu {
    display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px -28px; padding: 4px;
    max-height: 300px; overflow-y: auto;
    border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card);
}
.desktop-trail-menu[hidden] { display: none; }
.desktop-trail-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
    width: 100%; min-height: 40px; padding: 5px 8px; text-align: left; cursor: pointer;
    border: 0; border-radius: 8px; background: transparent; color: var(--text-primary);
}
.desktop-trail-option:hover:not(:disabled) { background: var(--bg-tertiary); }
.desktop-trail-option:disabled { opacity: .5; cursor: default; }
.desktop-trail-option[aria-checked="true"] { background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-card)); }
.desktop-trail-option:focus-visible, .desktop-trail-chip:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.desktop-trail-tick:empty { display: none; }
.desktop-trail-option .desktop-trail-copy strong { font-size: 13px; }
.desktop-trail-tick svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-primary); stroke-width: 2.4; }
.desktop-trail-note { margin: 0; padding: 8px; font: 500 13px var(--font-reading); color: var(--text-secondary); }
/* An open chip turns into its choices in place: the current one ticked, the
   rest beside it, rather than the chip plus a menu repeating it. */
.desktop-trail-level:has(> .desktop-trail-chip[aria-expanded="true"]) > .desktop-trail-chip { display: none; }
.desktop-trail-level > .desktop-trail-menu { margin: 0; }
.desktop-trail-level > .desktop-trail-menu .desktop-trail-option { min-height: 44px; }
/* Tutorial and About read as a plain ? and i, like the section help on the
   home screen: no circle, the glyph scaled up to fill the icon's box. */
body.desktop-workspace #topBar :is(#helpBtn, #desktopAboutBtn) svg circle { display: none; }
body.desktop-workspace #topBar :is(#helpBtn, #desktopAboutBtn) svg { transform: scale(1.75); stroke-width: 1.9; }

/* "Add to iPhone": a sidebar item (desktop only) that opens a guide of four mock iPhone screens. */
.install-guide-nav { display: none; }
body.desktop-workspace #topBar .install-guide-nav { display: flex; order: 6; }
#installGuideModal .install-guide-content { width: min(1180px, calc(100vw - 40px)); max-width: none; max-height: 92vh; overflow: auto; padding: 30px 34px 34px; }
.install-guide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.install-guide-head h2 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.install-guide-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 16px; }
.install-guide-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 26px; }
.install-guide-step { display: flex; flex-direction: column; gap: 14px; }
.install-guide-step h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; }
.install-guide-step p, .install-guide-foot { margin: 0; color: var(--text-muted); font-size: 14px; }
.install-guide-foot { margin-top: 20px; }
.install-guide-num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-primary); color: #fff; font-size: 14px; font-weight: 700; }
.ig-screen { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 250px; overflow: hidden; border-radius: 26px; border: 1px solid var(--border-color); background: #0f1013; }
.ig-screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 74px; height: 20px; margin-left: -37px; border-radius: 12px; background: #000; border: 1px solid var(--border-color); }
.ig-page { position: absolute; inset: 46px 18px 70px; display: grid; align-content: start; gap: 9px; }
.ig-page i { display: block; height: 10px; border-radius: 6px; background: #1d1f24; }
.ig-page i:nth-child(1) { width: 55%; height: 16px; } .ig-page i:nth-child(2) { width: 90%; } .ig-page i:nth-child(3) { width: 78%; } .ig-page i:nth-child(4) { width: 84%; }
.ig-bar { display: flex; align-items: center; justify-content: space-around; margin: 0 10px 12px; padding: 9px 6px; border-radius: 20px; background: #2a2c31; }
.ig-bar svg, .ig-row svg { width: 24px; height: 24px; fill: none; stroke: #a7abb5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ig-ring, .ig-btn { background: color-mix(in srgb, var(--accent-primary) 22%, transparent); box-shadow: 0 0 0 2px var(--accent-primary), 0 0 18px color-mix(in srgb, var(--accent-primary) 55%, transparent); }
.ig-ring { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
.ig-ring svg { stroke: #fff; }
.ig-sheet { margin: 0 10px 12px; overflow: hidden; border-radius: 18px; background: #2a2c31; }
.ig-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #383a40; color: #e9eaee; font-size: 15px; }
.ig-row:last-child { border-bottom: 0; }
.ig-row.is-hot { color: #fff; font-weight: 600; background: color-mix(in srgb, var(--accent-primary) 22%, transparent); box-shadow: inset 0 0 0 2px var(--accent-primary); }
.ig-row.is-hot svg { stroke: #fff; }
.ig-add { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 10px 12px; padding: 20px 14px 16px; border-radius: 18px; background: #2a2c31; color: #e9eaee; }
.ig-app { display: flex; align-items: center; gap: 12px; width: 100%; }
.ig-icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 13px; background: #24235a; color: #fff; font-size: 22px; font-weight: 800; }
.ig-app span { font-size: 15px; } .ig-app small { display: block; color: #8b93a1; font-size: 12px; }
.ig-btn { align-self: flex-end; padding: 8px 22px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 700; }
@media (max-width: 1000px) { .install-guide-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .install-guide-steps { grid-template-columns: 1fr; } }