/* Shared window bounds, measured by WindowManager when browser chrome changes. */
:root { --workspace-top: 34px; --workspace-height: calc(100dvh - 68px); }
.floating-window { max-height: var(--workspace-height); min-height: 0; }
.floating-window > .dialog-content { min-height: 0; flex: 1 1 auto; max-height: none; }
button.close-btn { border: 0; background: transparent; font: inherit; color: #55FFFF; }
button.close-btn:hover { background: #AA0000; }
#viewer-window { max-height: min(88dvh, var(--workspace-height)); min-width: 0; }
#viewer-window > .dialog-content { min-height: 0; }
#viewer-window .img-viewport { flex-shrink: 1; min-height: 80px; }
#viewer-window.maximized { top: var(--workspace-top) !important; bottom: auto !important; height: var(--workspace-height) !important; max-height: var(--workspace-height) !important; }
.viewer-details-toggle, .post-mobile-title { display: none; }
#viewer-retry { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); z-index: 2; }
.meta-col span { min-width: 0; }
.menu-dropdown { min-width: min(240px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
.dropdown-item { white-space: normal; overflow-wrap: anywhere; gap: 8px; }
.dropdown-item > * { min-width: 0; }
#snake-canvas { max-width: 100%; height: auto; }
/* A single lightweight path bar replaces raised buttons and repeated paths. */
.gallery-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 0 0 10px; border-bottom: 1px dashed #55FFFF; }
.gallery-up, .dir-breadcrumbs a { color: #55FFFF; font: inherit; font-size: .84rem; font-weight: bold; text-decoration: none; }
.gallery-up { background: transparent; border: 0; border-right: 1px solid #5555AA; padding: 4px 14px 4px 0; min-height: 32px; flex-shrink: 0; cursor: pointer; }
.dir-breadcrumbs { flex: 1 1 180px; min-width: 0; }
.dir-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; list-style: none; min-width: 0; }
.dir-breadcrumbs li { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; }
.dir-breadcrumbs li + li::before { content: '/'; color: #AAAAAA; padding: 0 9px; flex-shrink: 0; }
.dir-breadcrumbs a, .dir-breadcrumbs [aria-current] { display: inline-block; padding: 4px 0; overflow-wrap: anywhere; min-width: 0; line-height: 1.5; }
.dir-breadcrumbs [aria-current] { color: #FFFF55; font-size: .84rem; font-weight: bold; }
.gallery-up:hover, .dir-breadcrumbs a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.gallery-directory-count { color: #AAAAAA; font-size: .75rem; overflow-wrap: anywhere; margin-left: auto; }
.gallery-density { display: none; }
.density-button { background: transparent; color: #55FFFF; font: inherit; font-size: .74rem; border: 1px solid #5555AA; padding: 4px 10px; cursor: pointer; }
.density-button[aria-pressed="true"] { color: #FFFF55; background: #000080; border-color: #55FFFF; }

/* Keep the DOS frame wide while giving prose a comfortable reading measure. */
.post-content-body, .article-toc, #post-reader-view .doc-article > .doc-panel,
#post-reader-view .doc-footer-sign { width: 100%; max-width: 860px; margin-inline: auto; }
.post-content-body { color: #EEEEEE; }
.post-content-body img { display: block; margin-inline: auto; }
.post-content-body :is(h1, h2, h3) { scroll-margin-top: 16px; }
.article-toc { border: 1px solid #5555AA; background: #000080; padding: 10px 14px; font-size: .85rem; }
.article-toc summary { color: #55FFFF; cursor: pointer; min-height: 28px; }
.article-toc nav { display: grid; gap: 2px; padding-top: 8px; }
.toc-link { display: block; width: 100%; text-align: left; background: transparent; border: 0; font: inherit; color: #55FFFF; padding: 6px 0; cursor: pointer; overflow-wrap: anywhere; }
.toc-link:hover { color: #FFFF55; text-decoration: underline; }
.toc-h2 { padding-left: 12px; }
.toc-h3 { padding-left: 24px; }
.share-fallback { display: grid; grid-template-columns: 1fr auto; gap: 6px; flex-shrink: 0; font-size: .75rem; }
.share-fallback label { grid-column: 1 / -1; color: #000; }
.share-fallback input { min-width: 0; width: 100%; }
.credits-entry { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; }
.credits-entry svg { width: 34px; height: 34px; }
.credits-entry > div { min-width: 0; }
.credits-entry strong::after { content: '：'; }
.codex-logo { transform: scale(1.25); }
@media (max-width: 1100px) { .status-center { display: none; } }

@media (max-width: 768px) {
    html, body { height: 100vh; height: 100dvh; overflow: hidden; }
    .dos-menu { height: auto; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); position: relative; }
    .menu-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; height: auto; width: 100%; }
    .menu-items > a.menu-btn { grid-row: 1; }
    .menu-items > a[href="/index.html"] { grid-column: 1; }
    .menu-items > a[href="/posts.html"] { grid-column: 2; }
    .menu-items > a[href="/bbs.html"] { grid-column: 3; }
    .menu-items > a[href="/about.html"] { grid-column: 4; }
    .menu-dropdown-wrapper { grid-row: 2; width: 100%; height: auto; }
    .menu-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; padding: 4px; font-size: .8rem; letter-spacing: 0; }
    .menu-dropdown-wrapper .menu-btn { font-size: .75rem; background: #999; }
    .menu-dropdown { top: 100%; width: min(260px, calc(100vw - 24px)); min-width: 0; }
    .dropdown-item { min-height: 40px; padding: 8px; font-size: .8rem; }
    .dos-clock { position: absolute; bottom: 4px; right: max(8px, env(safe-area-inset-right)); width: calc((100% - 28px) / 4); min-height: 36px; padding: 4px; margin: 0; font-size: .7rem; display: flex; align-items: center; justify-content: center; }
    .dos-window.doc-window { flex: 1 1 auto; min-height: 0; height: auto !important; width: calc(100% - 16px) !important; margin: 8px auto !important; border-width: 2px; box-shadow: 4px 4px #000; }
    .window-header { height: 32px; padding: 2px 4px; gap: 4px; }
    .window-title { font-size: .77rem; }
    /* The main window scrolls vertically; wide code/tables keep their own scrollers. */
    .doc-layout { padding: 10px !important; gap: 12px; min-width: 0; overflow-x: hidden; }
    .doc-layout > * { min-width: 0; flex-shrink: 0; }
    .doc-article > *, .post-reader-container > * { min-width: 0; }
    .gallery-section-title { flex-wrap: wrap; gap: 2px 8px; white-space: normal; overflow-wrap: anywhere; }
    .gallery-section-title > span { min-width: 0; }
    .doc-article { font-size: .92rem; gap: 12px; }
    .doc-header-box { padding: 8px; }
    .header-line { display: none; }
    .header-content { font-size: .8rem; padding: 0; white-space: normal; overflow: hidden; }
    .doc-title { font-size: .9rem; }
    .doc-title:has(.title-cn) { display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
    .doc-title .title-cn { order: -1; }
    .doc-title .title-en { font-size: .65rem; color: #55FFFF; letter-spacing: .2px; }
    .doc-panel { padding: 10px; }
    .dir-toolbar { flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; }
    .dir-path-tag { min-width: 0; font-size: .75rem; overflow-wrap: anywhere; }
    .gallery-navigation { gap: 4px 10px; padding-bottom: 8px; }
    .gallery-up { min-height: 40px; padding-right: 10px; font-size: .78rem; }
    .dir-breadcrumbs { flex-basis: 160px; }
    .dir-breadcrumbs a, .dir-breadcrumbs [aria-current] { padding: 9px 0; font-size: .78rem; }
    .dir-breadcrumbs li + li::before { padding: 0 6px; }
    .gallery-directory-count { flex: 1 1 calc(100% - 130px); margin-left: 0; font-size: .7rem; }
    .gallery-density:not([hidden]) { display: flex; gap: 4px; margin-left: auto; }
    .density-button { min-height: 40px; }
    .gallery-grid { grid-template-columns: 100% !important; width: 100%; gap: 12px; }
    .album-card, .photo-item { width: 100%; max-width: 100%; box-shadow: 3px 3px #000; }
    .compact-photos .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .compact-photos .photo-meta-bar { padding: 5px; gap: 2px; }
    .compact-photos .photo-name-tag { font-size: .65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .compact-photos .photo-exif-badge { display: none; }
    .credits-entry { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
    .credits-entry svg { width: 30px; height: 30px; }
    .credits-entry strong { display: block; }
    .credits-entry strong::after { content: none; }
    .list-item:has(.credits-entry) { gap: 0; }
    .list-item:has(.credits-entry) .list-bullet { display: none; }
    .article-toc { padding: 8px 10px; font-size: .8rem; }
    .article-toc summary, .toc-link { min-height: 40px; }
    .album-card-header { font-size: .78rem; padding: 5px 8px; }
    .album-cover-box { aspect-ratio: 2.4 / 1; }
    .album-meta-box { padding: 8px 10px; }
    .album-title { font-size: .9rem; margin-bottom: 3px; }
    .album-desc { display: none; }
    .album-detail-line { font-size: .75rem; white-space: normal; overflow-wrap: anywhere; }
    .dos-status { height: auto; min-height: 30px; padding: 4px max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    .status-left { gap: 6px; font-size: .7rem; }
    .status-left > span:not(.status-btn) { display: none; }
    .status-right { font-size: .7rem; white-space: nowrap; }
    .status-btn { gap: 4px; min-height: 30px; display: inline-flex; align-items: center; }
    .tag-badge, .dos-button { min-height: 36px; font-size: .8rem; }
    #terminal-window { width: calc(100vw - 16px); max-height: var(--workspace-height); }
    .terminal-quick-bar { display: flex; gap: 4px; flex-wrap: wrap; }
    .term-quick-btn { min-height: 34px; font-size: .75rem; padding: 4px 6px; }
    #welcome-window { width: calc(100vw - 24px); max-width: 560px; }
    .welcome-content-panel { padding: 10px; gap: 10px; }
    .welcome-intro h2 { font-size: .98rem; }
    .welcome-location-desktop { display: none; }
    .welcome-location-mobile { display: inline; }
    .welcome-sections > div { grid-template-columns: 70px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
    .welcome-actions .dos-button { width: 100%; }
    .help-row { flex-direction: column; align-items: flex-start; gap: 3px; }
    .help-row strong { text-align: left; padding-left: 0; }
    .clock-body { gap: 8px; padding: 6px; }
    .analog-box, #analog-clock { width: 80px; height: 80px; }
    .clock-detail-panel { font-size: .75rem; }

    /* Keep the table on desktop, present file-directory entries on phones. */
    .dos-table, .dos-table tbody { display: block; }
    .dos-table thead { display: none; }
    .dos-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 10px; border-bottom: 1px dashed #55FFFF; }
    .dos-table td { padding: 0; border: 0; word-break: normal; min-width: 0; }
    .post-name-cell { grid-column: 1 / -1; }
    .post-file-link { align-items: baseline; gap: 8px; font-size: .94rem; line-height: 1.5; }
    .post-file-tag { flex-shrink: 0; font-size: .72rem; }
    .post-desktop-name, .post-secondary-title { display: none; }
    .post-mobile-title { display: inline; overflow-wrap: anywhere; }
    .post-tags-cell { grid-column: 1 / -1; }
    .post-date, .post-size { font-size: .74rem; }
    #posts-pagination-bar { gap: 8px; flex-direction: row; flex-wrap: wrap; }
    #posts-pagination-bar .dos-button { flex: 1 1 40%; min-width: 0; overflow-wrap: anywhere; font-size: .73rem; }
    #posts-page-info { order: 2; flex: 0 0 100%; min-width: 0; text-align: center; overflow-wrap: anywhere; font-size: .75rem; }
    #post-reader-view > .dir-toolbar { margin: 0; padding: 0 0 6px; border: 0; }
    #reader-path-tag { display: none; }
    #post-reader-view .doc-header-box { display: none; }
    #post-reader-view .doc-panel { font-size: .78rem; line-height: 1.5; }
    #post-reader-view .doc-panel p { margin: 3px 0; }
    #article-meta-title { font-size: 1rem; color: #FFFF55; }
    .post-content-body { font-size: .94rem; line-height: 1.85; }
    .post-content-body h1 { font-size: 1.3rem; }
    .post-content-body h2 { font-size: 1.15rem; }
    .post-content-body pre { font-size: .78rem; }
    .bbs-page .doc-header-box { display: none; }
    .bbs-input-row { grid-template-columns: 100%; gap: 10px; }
    .bbs-form-actions { flex-direction: column; align-items: stretch; }
    .bbs-form-actions .dos-button { width: 100%; }
    .bbs-field-header, .bbs-form-header-line { flex-wrap: wrap; gap: 6px; }
    .bbs-msg-header { flex-direction: column; align-items: flex-start; }
    .bbs-header-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .bbs-replies-container { margin-left: 2px; padding-left: 6px; }
    .bbs-pagination-bar { flex-direction: column; gap: 8px; }
    .bbs-pagination-bar .dos-button { width: 100%; }
    .bbs-form-panel { padding: 10px; gap: 10px; }
    .bbs-archive-header { flex-wrap: wrap; gap: 8px; }
    #admin-login-form { display: flex; flex-direction: column; gap: 8px; }
    .bbs-reply-tag { flex-wrap: wrap; }
    .bbs-privacy-note { font-size: .74rem; }
}

/* A touch screen can be wide; these rules never retain the desktop transform. */
@media (pointer: coarse) {
    .dos-menu { height: auto; min-height: 36px; }
    .menu-items { height: auto; }
    .close-btn, .header-btn, .dos-clock { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }
    .window-header { min-height: 40px; height: auto; }
    .dos-button, .tag-badge, .dropdown-item { min-height: 40px; }
    .menu-btn { min-height: 36px; }
}
@media (max-width: 768px), (pointer: coarse) {
    /* Near-full-size touch windows need a small shadow that fits in the gutter. */
    .floating-window { box-shadow: 4px 4px 0 #000; }
    /* The photo viewer is modal here; avoid showing a second frame underneath. */
    :is(.dos-window, .floating-window)[data-viewer-inert] { visibility: hidden; }
    #viewer-window, #viewer-window.maximized { position: fixed !important; top: var(--workspace-top) !important; bottom: auto !important; left: 2vw !important; right: auto !important; width: 96vw !important; max-width: 96vw !important; min-width: 0 !important; height: var(--workspace-height) !important; max-height: var(--workspace-height) !important; margin: 0 !important; transform: none !important; }
    #viewer-window { border-width: 2px; }
    #viewer-window > .dialog-content { height: auto; flex: 1 1 auto; padding: 6px; gap: 6px; min-height: 0; overflow: hidden; }
    #max-viewer-btn { display: none !important; }
    #viewer-window .window-header { cursor: default; }
    #viewer-window .img-viewport { flex: 1 1 0 !important; min-height: 0; height: auto !important; max-height: none; border: 0; }
    #viewer-window .viewer-toolbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    #viewer-window .viewer-toolbar .dos-button { padding: 4px 1px; min-height: 44px; font-size: .7rem; }
    .viewer-details-toggle { display: block; align-self: stretch; flex-shrink: 0; min-height: 32px; font-size: .73rem; }
    #viewer-window .lb-details { display: none; }
    #viewer-window.details-expanded .lb-details { display: grid; grid-template-columns: 1fr; gap: 4px; max-height: min(34dvh, 220px, max(36px, calc(var(--workspace-height) - 230px))); overflow: auto; flex-shrink: 0; font-size: .75rem; padding: 6px; }
    .meta-col p { white-space: normal; }
    .meta-col span { white-space: normal; overflow-wrap: anywhere; }
    .meta-row-file { display: none; }
}
@media (max-height: 480px) and (min-width: 769px) {
    .dos-menu { padding-top: env(safe-area-inset-top, 0px); height: auto; min-height: 32px; }
    #viewer-window { height: var(--workspace-height); }
}

/* Landscape phones have enough width for the original menu, but little height. */
@media (min-width: 600px) and (max-width: 768px) and (max-height: 480px) {
    .dos-menu { min-height: 40px; padding-bottom: 0; }
    .menu-items { display: flex; width: auto; gap: 4px; }
    .menu-dropdown-wrapper { width: auto; }
    .menu-btn { width: auto; padding: 4px 6px; }
    .menu-dropdown-wrapper .menu-btn { background: transparent; }
    .dos-clock { position: static; width: auto; min-width: 76px; }
}