/* Desktop companion to the settled app UI. Touch and phone layouts stay in the app styles. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
 :root{--rail:208px;--desk-measure:1200px;--page-pad:32px}
 .entry-shell:has(> #entry-main){display:grid;grid-template-columns:var(--rail) minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important}
 .entry-shell::before,.entry-shell::after,.entry-shell:has(> #entry-main.selection-screen .selection-word-list)::before,.entry-shell:has(> #entry-main.selection-screen .selection-word-list)::after{display:block}
 .entry-shell::before,.entry-shell::after{grid-row:1/3!important}
 .entry-shell>.entry-header,.is-directory .entry-shell>.entry-header,.entry-shell:has(.article-open)>.entry-header{display:flex!important;height:auto!important;min-height:0;padding:28px 20px 22px!important;visibility:visible;overflow:visible;align-items:flex-start}
 .entry-shell>.entry-header{grid-column:1!important;grid-row:1!important}
 .entry-shell .brand,.entry-shell:has(#entry-main.stats-screen) .entry-header .brand{gap:10px;font-size:16px;white-space:nowrap}
 .entry-shell .brand>span:not(.brand-mark){position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
 .entry-shell .brand small{font-size:10px;letter-spacing:1px;margin-top:5px}
 .entry-shell .brand-mark.tuji-brand-mark,.entry-shell:has(#entry-main.stats-screen) .entry-header .brand-mark.tuji-brand-mark{width:42px;height:42px;flex:none}
 .entry-shell>#entry-nav,.entry-shell:has(> #entry-main.selection-screen .selection-word-list)>#entry-nav,body.has-open-article-folder .entry-shell>#entry-nav{display:flex!important;grid-column:1!important;grid-row:2!important;flex-direction:column;padding:0 14px 24px;gap:7px;opacity:1!important}
 .entry-shell #entry-nav a{height:48px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 16px;font-size:14px}
 .entry-shell #entry-nav a:not([aria-current]):hover{background:var(--sage-soft)}
 .entry-shell #entry-nav a:focus-visible{outline-offset:-3px}
 .entry-shell>#entry-main,.entry-shell:has(> #entry-main.selection-screen .selection-word-list)>#entry-main{grid-column:2!important;grid-row:1/3!important;min-width:0;padding:32px max(var(--page-pad),calc((100% - var(--desk-measure))/2)) 24px}
 .entry-shell #entry-main :is(.articles-scroll,.my-scroll,.selection-scroll,.stats-dashboard){scrollbar-width:thin;scrollbar-color:#c6d1ba transparent;overscroll-behavior:contain}

 /* One-screen home: an introduction, a clear study summary, then four familiar channels. */
 .entry-shell #entry-main:has(.channels){grid-template-columns:minmax(0,1fr) minmax(340px,1fr);grid-template-rows:auto minmax(0,1fr);align-content:center;gap:28px 32px;overflow:hidden;padding-block:clamp(28px,7dvh,76px)}
 .entry-shell #entry-main:has(.channels)>.page-heading{align-self:center;min-height:92px;display:flex;flex-direction:column;justify-content:center;background-size:210px auto;background-position:right bottom}
 .entry-shell #entry-main:has(.channels) .eyebrow{font-size:17px;font-weight:600;margin-bottom:9px}
 .entry-shell #entry-main:has(.channels) .lead{font-size:14px;line-height:1.7;max-width:270px}
 .entry-shell #entry-main:has(.channels) .stats-placeholder{padding:20px 22px;align-self:center}
 .entry-shell #entry-main:has(.channels) .stat-grid strong{font-size:30px}
 .entry-shell #entry-main:has(.channels) .stat-grid span{font-size:12px}
 .entry-shell #entry-main:has(.channels) .channels{align-self:center;max-height:490px;height:100%;min-height:0}
 .entry-shell #entry-main:has(.channels) .channels>.section-line{margin-bottom:16px}
 .entry-shell #entry-main:has(.channels) .channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 94px;gap:18px}
 .entry-shell #entry-main:has(.channels) .channel-a1{grid-column:1;grid-row:1}
 .entry-shell #entry-main:has(.channels) .channel-a2{grid-column:2;grid-row:1}
 .entry-shell #entry-main:has(.channels) .channel-flash{grid-column:1;grid-row:2}
 .entry-shell #entry-main:has(.channels) .channel-articles{grid-column:2;grid-row:2}
 .entry-shell #entry-main:has(.channels) .course-window{flex:1;aspect-ratio:auto;min-height:80px}
 .entry-shell #entry-main:has(.channels) .course-window::before{top:calc(0px - var(--s) * var(--r) / 2)}
 .entry-shell #entry-main:has(.channels) .channel-body{padding:16px 20px 18px}
 .entry-shell #entry-main:has(.channels) .channel-body h3{font-size:22px}
 .entry-shell #entry-main:has(.channels) .channel-body p{font-size:13px;margin:5px 0 12px}
 .entry-shell #entry-main:has(.channels) .channel-body .channel-action{min-height:38px}
 .entry-shell #entry-main:has(.channels) .channel-text h3{font-size:17px}
 .entry-shell #entry-main:has(.channels) .channel-text p{font-size:12px;margin-top:5px}

 /* Map remains the same learning path; progress gets its own stationary companion panel. */
 .entry-shell #entry-main.directory-screen{padding-block:28px 20px;background:var(--paper)}
 .is-directory .directory-header{width:100%;max-width:1120px;margin-bottom:22px}
 .is-directory .directory-header .journey-home-link{font-size:18px}
 .directory-header .theme-plan-input{padding-inline:14px;min-height:44px;background:var(--card)}
 .directory-header .theme-plan-input label,.directory-header .theme-plan-choice>span{font-size:12px}
 .directory-header .theme-plan-choice select{font-size:14px;min-height:44px;width:50px;background-position:calc(100% - 7px) 20px,calc(100% - 3px) 20px}
 .journey-frame{width:100%;max-width:1120px;grid-template-columns:250px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:28px;overflow:hidden}
 .journey-overview-panel{grid-column:1;grid-row:1;align-self:start;min-height:278px;padding:24px;border-radius:22px}
 [data-journey-progress]{display:flex;flex-wrap:wrap;gap:10px 8px;width:100%}
 .journey-progress-label{width:100%;font-size:14px}
 .journey-progress-count{font-size:13px;gap:5px}
 .journey-progress-count b{font-size:38px}
 .journey-progress-meter{width:100%;height:6px;margin-top:4px}
 .journey-plan-slot{position:relative;inset:auto;margin-top:20px}
 .journey-plan-slot .theme-plan-result{justify-content:flex-start;gap:8px}
 .journey-plan-slot .theme-plan-result>span,.journey-plan-slot .theme-plan-result strong>span{font-size:12px}
 .journey-plan-slot .theme-plan-result strong{font-size:24px}
 .journey-landmark{width:240px;max-width:100%;opacity:.5;bottom:-12px;right:-32px}
 #directory-content.learning-path-viewport{grid-column:2;grid-row:1;padding:48px 14px 28px;scrollbar-width:thin;scrollbar-color:#c6d1ba transparent;border:1px solid var(--line);border-radius:24px;background:#fffefa66}
 .journey-floor{left:auto;right:0;width:calc(100% - 278px);transform:none}
 .journey-stage-caption{width:clamp(170px,calc(71cqw - 4px),366px)}
 .journey-stage-caption strong{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;font-size:15px}
 .journey-gate h2{font-size:13px}
 .journey-card-meta{font-size:11px}

 /* Article collection and open folders share the same workspace and persistent navigation. */
 .entry-shell #entry-main.articles-screen:not(.article-open):has(.article-groups){padding:32px max(var(--page-pad),calc((100% - var(--desk-measure))/2)) 0;gap:22px}
 #entry-main .article-stack-library{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;align-content:start;padding:12px 4px 32px}
 .article-stack-cover{max-width:270px;margin-inline:auto}
 .folder-label strong{font-size:20px}
 .folder-topics,.folder-meta{font-size:12px}
 .stack-action{font-size:11px}
 .article-folder-view{padding:20px 24px 0}
 .folder-dialog-header{padding:10px 8px 22px}
 .folder-dialog-header h2{font-size:26px}
 .folder-dialog-header p{font-size:13px}
 .folder-articles{padding:10px 14px 32px}
 .folder-article-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 24px}
 #entry-main .article-folder-view .folder-article h3{font-size:18px}
 #entry-main .article-folder-view .article-title-nl{font-size:14px;line-height:1.6}
 .folder-article-copy{gap:8px;padding:14px 16px 18px}
 .folder-article-index,.folder-article-meta{font-size:12px}
 .folder-dock{flex-basis:148px}
 .entry-shell #entry-main.article-open{padding-top:22px;padding-bottom:0}
 #entry-main.article-open{--read-title:23px;--read-nl-title:25px;--read-nl:18px;--read-zh:14px;--read-word:15px;--read-meaning:13px;--read-pane:14px;--read-back:13px;--read-detail-title:28px;--read-detail-zh:17px;--read-knowledge:16px;--read-knowledge-zh:13px}

 /* Statistics keep the app's tree, calendar and charts, with room to read them on a monitor. */
 .entry-shell #entry-main.stats-screen{padding-top:32px;gap:18px}
 #entry-main.stats-screen .stats-dashboard{width:100%;gap:20px;padding:0 2px 20px;max-height:660px}
 #entry-main.stats-wide .stats-dashboard{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:max-content max-content auto}
 #entry-main.stats-wide.stats-one-page .stats-dashboard{grid-template-rows:minmax(180px,auto) minmax(240px,1fr) 36px}
 #entry-main .stats-dashboard>.study-card{padding:20px 22px;border-radius:22px}
 #entry-main .study-kicker{font-size:13px}
 #entry-main .study-card h2{font-size:17px}
 #entry-main .study-today-number strong{font-size:40px}
 #entry-main.stats-wide .study-today-actions>a{font-size:12px;padding:7px 10px}
 #entry-main .study-today-actions label,#entry-main .study-summary>div>span,#entry-main .study-calendar-note{font-size:12px}
 #entry-main :is(.study-goal,.study-start,.study-stat span,.study-calendar-detail,.study-chart-note){font-size:12px}
 #entry-main .study-chart-tabs button{font-size:13px;min-height:36px}
 #entry-main .study-dashboard-footer{gap:20px;font-size:12px;min-height:36px}

 /* A comfortable reading measure for settings and vocabulary management. */
 .entry-shell #entry-main.my-screen{padding-top:22px}
 #entry-main.my-screen .my-scroll{width:100%;max-width:1120px;grid-template-columns:280px minmax(0,1fr);gap:18px}
 #entry-main.my-screen .my-profile{flex-wrap:nowrap;gap:10px}
 #entry-main.my-screen .my-profile>.my-button{margin-left:auto;flex:none}
 #entry-main.my-screen .my-profile h1{font-size:16px;word-break:normal}
 #entry-main.my-screen .my-panel{padding:16px;border-radius:16px}
 #entry-main.my-screen .my-setting-row{padding-block:12px}
 #entry-main.my-screen .my-setting-copy strong{font-size:13px}
 #entry-main.my-screen .my-setting-copy small{font-size:11px}
 #entry-main.my-screen .my-tabs button{min-height:40px;font-size:12.5px}
 #entry-main.selection-screen{gap:18px}
 .entry-shell:has(> #entry-main.selection-screen)>#entry-main.selection-screen{padding:32px max(var(--page-pad),calc((100% - var(--desk-measure))/2)) 24px;gap:18px}
 .entry-shell:has(> #entry-main.selection-screen .selection-word-list)>.entry-header{display:flex!important}
 .selection-screen .selection-word-choice strong{font-size:17px}
 .selection-screen .selection-word-choice small{font-size:13px}
 .selection-screen .selection-word,.selection-screen .selection-word-choice{min-height:46px}
 .selection-screen .selection-word-detail{min-height:44px}
 .selection-screen .selection-group{font-size:13px;min-height:36px}
 .selection-screen .selection-search input,.selection-screen:has(.selection-word-list) .selection-search input{font-size:14px}
 .is-flash .entry-shell #entry-main.flash-screen{padding-top:28px;padding-bottom:24px;padding-inline:max(40px,calc((100% - 800px)/2));gap:12px}
 .flash-desk-actions>button{min-height:48px}
 .flash-previous-control{min-height:36px;font-size:13px}
}
@media (min-width:1440px) and (hover:hover) and (pointer:fine){
 :root{--rail:224px;--page-pad:48px}
}
@media (min-width:1024px) and (max-width:1199px) and (hover:hover) and (pointer:fine){
 :root{--rail:180px;--page-pad:24px}
 .entry-shell>.entry-header,.is-directory .entry-shell>.entry-header{padding-inline:16px!important}
 .entry-shell .brand{font-size:14px;gap:8px}
 .journey-frame{grid-template-columns:200px minmax(0,1fr);gap:18px}
 .journey-overview-panel{padding:18px;min-height:258px}
 .journey-floor{width:calc(100% - 218px)}
 #entry-main.my-screen .my-scroll{grid-template-columns:260px minmax(0,1fr);gap:18px}
 #entry-main.my-screen .my-profile{flex-wrap:wrap}
 #entry-main .article-stack-library{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .folder-label strong{font-size:17px}
}
@media (min-width:1024px) and (max-height:740px) and (hover:hover) and (pointer:fine){
 .entry-shell #entry-main:has(.channels){padding-block:24px;gap:20px 28px}
 .entry-shell #entry-main:has(.channels) .channel-grid{grid-template-rows:minmax(0,1fr) 78px;gap:14px}
 .entry-shell #entry-main:has(.channels) .channel-body{padding:10px 16px 14px}
 .entry-shell #entry-main:has(.channels) .channel-body p{margin:3px 0 8px}
 #entry-main.stats-wide.stats-one-page .stats-dashboard{grid-template-rows:minmax(154px,auto) minmax(210px,1fr) 32px}
 #entry-main .stats-dashboard>.study-card{padding:14px 16px}
}