/* Preview belongs to Projects and follows the size of the window. */
.terminal-projects .projects-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.terminal-projects .projects-header .fetch-prompt { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-toggle { flex-shrink: 0; padding: 5px 8px; border: 1px solid var(--terminal-rule); background: transparent; color: var(--terminal-muted); font: 12px/20px var(--simple-font), monospace; cursor: pointer; }
.preview-toggle:hover { color: var(--terminal-text); border-color: var(--terminal-accent); }
.preview-toggle:focus-visible { outline: 1px solid var(--terminal-accent); outline-offset: 2px; }
/* File names lead; dates and ls metadata stay readable in the background. */
.terminal-page .post-select .post-name { color: var(--terminal-text); }
.terminal-page .post-select :is(.post-date, .post-permissions, .post-size) { color: #8c8996; font-size: 16px; }
.terminal-page .post-select:is(:hover, :focus-visible, [aria-pressed='true']) .post-name { color: var(--terminal-accent); }
.terminal-page .post-select:is(:hover, :focus-visible, [aria-pressed='true']) :is(.post-date, .post-permissions, .post-size) { color: #aba6b3; }
.terminal-page .terminal-projects :is(.ls-total, .journal-status) { color: #8c8996; }
.terminal-page .projects-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; transition: grid-template-columns 200ms cubic-bezier(.2,.8,.2,1), grid-template-rows 200ms cubic-bezier(.2,.8,.2,1), gap 200ms ease; }
.terminal-page .projects-split.is-preview-hidden { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0fr); column-gap: 0; }
.terminal-page .projects-split .journal { grid-area: auto; }
.project-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--terminal-rule); padding-left: 20px; overflow: hidden; opacity: 1; visibility: visible; transition: opacity 140ms ease, translate 200ms ease, padding 200ms ease, border-width 200ms ease, visibility 0s; }
.is-preview-hidden .project-preview { padding: 0; border-width: 0; opacity: 0; translate: 8px 0; visibility: hidden; transition-delay: 0s, 0s, 0s, 0s, 200ms; }
.project-preview [hidden], .project-preview[hidden] { display: none; }
.project-preview-image { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; overflow: hidden; background: #0003; border: 1px solid #ffffff12; }
.project-preview-image img { position: absolute; display: block; max-width: none; max-height: none; }
.project-preview-image span { padding: 12px; color: var(--terminal-muted); font-size: 16px; }
.terminal-page .projects-split:not(.is-preview-hidden) .post-select { grid-template-columns: 152px minmax(0, 1fr); gap: 10px; padding-inline: 8px; }
.projects-split:not(.is-preview-hidden) :is(.post-permissions, .post-size) { display: none; }
.terminal-page .projects-split:not(.is-preview-hidden) .post-date { grid-column: 1; font-size: 16px; }
.terminal-page .projects-split:not(.is-preview-hidden) .post-name { grid-column: 2; }
.terminal-page .projects-split:not(.is-preview-hidden) .list-end-prompt { font-size: 16px; overflow-wrap: anywhere; padding-inline: 8px; }
@container projects-window (min-width: 1000px) {
  .terminal-page .projects-split:not(.is-preview-hidden) { grid-template-columns: max-content minmax(0, 1fr); }
  .terminal-page .projects-split:not(.is-preview-hidden) .post-name { overflow: visible; text-overflow: clip; }
}
@container projects-window (max-width: 720px) {
  .terminal-page .projects-split { gap: 12px; }
  .project-preview { padding-left: 12px; }
  .terminal-page .projects-split:not(.is-preview-hidden) .post-select { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 8px; }
  .terminal-page .projects-split:not(.is-preview-hidden) .post-name { grid-column: 1; grid-row: 1; }
  .terminal-page .projects-split:not(.is-preview-hidden) .post-date { grid-column: 1; grid-row: 2; line-height: 20px; }
}
@container projects-window (max-width: 440px) {
  .terminal-page .projects-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(100px, 1fr) minmax(120px, .85fr); }
  .terminal-page .projects-split.is-preview-hidden { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 0fr); row-gap: 0; }
  .project-preview { border-left: 0; border-top: 1px solid var(--terminal-rule); padding: 8px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .is-preview-hidden .project-preview { padding: 0; border-width: 0; translate: 0 8px; }
  .terminal-page .projects-split:not(.is-preview-hidden) .post-select { grid-template-columns: 152px minmax(0, 1fr); padding-block: 4px; gap: 10px; }
  .terminal-page .projects-split:not(.is-preview-hidden) .post-date { grid-column: 1; grid-row: 1; }
  .terminal-page .projects-split:not(.is-preview-hidden) .post-name { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .terminal-page .projects-split, .project-preview { transition: none; }
}