/* A shared font scale prevents navigation labels and information rows from diverging. */
html[data-design="commander"]{--directory-font-size:18px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-design="commander"] :is(.directory-table,.option-directory,.settings-directory,.commander-columns,.commander-row){font-size:var(--directory-font-size)!important;line-height:1.35!important}
html[data-design="commander"] :is(.directory-table,.option-directory,.settings-directory,.commander-columns,.commander-row) :is(th,td,button,a,span,strong,small){font-size:var(--directory-font-size)!important;line-height:1.35!important;font-weight:400!important}
html[data-design="commander"] #mainNavigation .directory-table :is(th,td,button,a,span,strong,small){font-size:var(--directory-font-size)!important;line-height:1.35!important}
/* Headers and rows use identical tracks. Type has room for all four letters. */
html[data-design] .commander-columns,html[data-design] .commander-row{display:grid!important;grid-template-columns:calc(7ch + 4px) minmax(0,1fr) calc(4ch + 8px) calc(3ch + 8px)!important;gap:8px!important;padding:8px 6px!important;align-items:center!important;min-width:0!important;box-sizing:border-box}
html[data-design] :is(.commander-columns,.commander-row)>span{display:block;min-width:0;max-width:100%;box-sizing:border-box}
html[data-design] :is(.commander-columns,.commander-row)>span:first-child{white-space:nowrap!important}
html[data-design] :is(.commander-columns,.commander-row)>span:nth-child(2){white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
html[data-design] :is(.commander-columns,.commander-row)>span:nth-child(n+3){white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;text-align:center!important;border-left:1px solid currentColor;padding-left:6px}
html[data-design] .commander-columns{align-items:end!important}
html[data-design] .commander-list{min-width:0}.commander-list>h2{overflow-wrap:anywhere!important}
@media(max-width:360px){html[data-design="commander"]{--directory-font-size:16px}html[data-design] .commander-columns,html[data-design] .commander-row{gap:6px!important}}
html[data-design="commander"] body #sectionMenu .option-directory :is(th,td,button,a,span,strong,small),html[data-design="commander"] body #detailBody :is(.option-directory,.settings-directory) :is(th,td,button,a,span,strong,small){font-size:var(--directory-font-size)!important;line-height:1.35!important}
/* Keep the column headings inside the same scrollbar viewport as the entries. */
.commander-rows>.commander-columns{position:sticky;top:0;z-index:1;background:var(--paper);color:var(--ink)}
/* Main directory uses one row pitch. Group borders and the old metadata spacer
   made some entries taller than their neighbors. */
html[data-design="commander"] #mainNavigation .directory-table tbody tr.directory-info-spacer{display:none!important}
html[data-design="commander"] #mainNavigation .directory-table tbody tr:not(.directory-info-spacer)>td{height:40px!important;padding-top:0!important;padding-bottom:0!important;border-top:0!important}
html[data-design="commander"] #mainNavigation .directory-table tbody tr.directory-info-row>td{height:40px!important}
/* One blank directory row after PLAYLISTS and ABOUT. */
html[data-design="commander"] #mainNavigation .directory-table tbody tr.directory-info-spacer{display:table-row!important}
html[data-design="commander"] #mainNavigation .directory-table tbody tr:is(.directory-info-spacer,.directory-menu-spacer)>td{height:40px!important;border:0!important;background:var(--paper)!important;cursor:default!important}
html[data-design="commander"] #mainNavigation .directory-table tbody tr:is(.directory-info-spacer,.directory-menu-spacer):hover>td{background:var(--paper)!important;color:var(--ink)!important}
/* The cassette viewport fills the available space above the bottom shortcuts. */
html[data-design="commander"] .commander-list{display:flex;flex-direction:column;min-height:0}
html[data-design="commander"] .commander-list>h2{flex:none}
html[data-design="commander"] .commander-rows{flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto}
/* Main directory only: compact Norton Commander columns, with no squeezed text. */
html[data-design="commander"] #mainNavigation .directory-table{table-layout:fixed;width:100%}
html[data-design="commander"] #mainNavigation .directory-table :is(th,td):nth-child(2){width:calc(6ch + 12px)!important;text-align:center!important;white-space:nowrap!important;border-left:1px solid var(--line)}
html[data-design="commander"] #mainNavigation .directory-table :is(th,td):nth-child(3){width:calc(6ch + 12px)!important;text-align:right!important;white-space:nowrap!important;border-left:1px solid var(--line)}
html[data-design="commander"] #mainNavigation .directory-table :is(th,td):nth-child(4){width:calc(3ch + 12px)!important;text-align:center!important;white-space:nowrap!important;border-left:1px solid var(--line)}
html[data-design="commander"] #mainNavigation .directory-table :is(th,td):first-child{width:auto!important;min-width:0!important}
html[data-design="commander"] #mainNavigation .directory-table :is(th,td){padding-left:5px!important;padding-right:5px!important;font-size:16px!important;line-height:1.2!important}
html[data-design="commander"] #mainNavigation .directory-table :is(a,button,span){font-size:16px!important;line-height:1.2!important}
html[data-design="commander"] #mainNavigation .directory-table :is(a,button){overflow-wrap:normal!important;word-break:normal!important;white-space:normal!important}
html[data-design="commander"] #mainNavigation .directory-table tbody tr:not(.directory-info-spacer)>td{height:34px!important}
html[data-design="commander"] #mainNavigation .directory-table .directory-info-row td:only-child{width:100%!important;border-left:0!important}
html[data-design="commander"] #mainNavigation .directory-info-row :is(button,td>span){display:flex!important;justify-content:space-between;align-items:center;gap:8px;min-width:0}
html[data-design="commander"] #mainNavigation .directory-info-row :is(button,td>span)>span:last-child{text-align:right;overflow-wrap:anywhere;white-space:normal!important}
html[data-design="commander"] #mainNavigation .directory-table :is(.directory-menu-spacer,.directory-info-spacer) td:only-child{width:100%!important;border-left:0!important}
@media(max-width:420px){html[data-design="commander"] #mainNavigation .directory-table :is(th,td){padding-left:4px!important;padding-right:4px!important;font-size:14px!important}html[data-design="commander"] #mainNavigation .directory-table :is(a,button,span){font-size:14px!important}}

/* VERSION, UPDATED, DATE and TIME stay together at the bottom of the directory. */
html[data-design="commander"] #mainNavigation .directory-table tbody tr.directory-info-spacer{height:auto!important}
html[data-design="commander"] #mainNavigation .directory-table tbody tr.directory-info-spacer>td{height:max(40px,var(--directory-footer-gap,40px))!important;padding:0!important}

/* Extra context columns have fixed space; collapse them before labels get squeezed. */
html[data-design="commander"] #mainNavigation .directory-table .directory-contents{width:calc(9ch + 12px)!important}
html[data-design="commander"] #mainNavigation .directory-table .directory-source{width:8ch!important}
html[data-design="commander"] #mainNavigation .directory-table :is(.directory-contents,.directory-source){border-left:1px solid var(--line);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-align:left!important}
@media(max-width:560px){html[data-design="commander"] #mainNavigation .directory-source{display:none!important}}
@media(max-width:440px){html[data-design="commander"] #mainNavigation .directory-contents{display:none!important}}

/* Keep long mobile directory labels within their own column. */
html[data-design="commander"] #mainNavigation .directory-table tbody tr:not(.directory-info-row)>td:first-child :is(a,button,span){max-width:100%;min-width:0;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
html[data-design="commander"] #mainNavigation .directory-table tbody tr:not(.directory-info-row)>td:first-child{overflow:hidden}
@media(max-width:440px){
 html[data-design="commander"] #mainNavigation .directory-table :is(th,td):nth-child(2){width:calc(5ch + 10px)!important}
 html[data-design="commander"] #mainNavigation .directory-table :is(th,td):nth-child(3){width:calc(5ch + 10px)!important}
 html[data-design="commander"] #mainNavigation .directory-table :is(th,td):nth-child(4){width:calc(3ch + 10px)!important}
}

/* Catalog references: reserve compact metadata columns and keep titles intact. */
html[data-design="commander"] .catalog-reference-panel{min-width:0;max-width:100%;overflow-x:auto}
html[data-design="commander"] .catalog-reference-panel .file-directory{table-layout:auto;width:100%}
html[data-design="commander"] .catalog-reference-panel .file-directory :is(th,td){text-align:left!important;white-space:nowrap!important;padding-left:8px!important;padding-right:8px!important}
html[data-design="commander"] .catalog-reference-panel .file-directory :is(th,td):first-child{width:auto!important}
html[data-design="commander"] .catalog-reference-panel .file-directory :is(th,td):nth-child(n+2){width:1%!important}
html[data-design="commander"] .catalog-reference-panel .file-directory td:first-child a{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}

/* Desktop Commander: one vertical scrollbar per directory or open preview. */
html[data-design="commander"] body.pane-embedded .commander-rows{overflow:visible;flex:none}
html[data-design="commander"]:has(body.pane-embedded dialog[open]:not(.inline-detail)),html[data-design="commander"] body.pane-embedded:has(dialog[open]:not(.inline-detail)){overflow:hidden}
@media(min-width:761px){
 html[data-design="commander"] .commander-rows{overflow:visible;flex:none}
 html[data-design="commander"]:has(dialog[open]:not(.inline-detail)),html[data-design="commander"] body:has(dialog[open]:not(.inline-detail)){overflow:hidden}
}

/* Phone verified separately: avoid a second vertical scrollbar inside the page. */
@media(max-width:760px){html[data-design="commander"] .commander-rows{overflow:visible;flex:none}}