/* Give the panel text room above, below and inside each task. */
:root :is(.terminal-page, .post-desktop) .desktop-panel { height: 40px; padding-inline: 24px; }
:root .desktop-tasks { gap: 8px; align-items: stretch; padding-block: 0; }
:root .desktop-brand { white-space: nowrap; flex-shrink: 0; }
/* Center the pixel glyphs, whose visible ink sits above the line-box center. */
:root .desktop-panel > :is(time, .desktop-activity, .desktop-brand) { position: relative; top: 2px; }
:root .post-desktop { padding-top: 52px; }
@media (max-width: 700px) {
  :root :is(.terminal-page, .post-desktop) .desktop-panel { height: 72px; padding-inline: 12px; row-gap: 4px; }
  :root :is(.terminal-page, .post-desktop) { padding-top: 84px; }
  :root :is(.terminal-page, .post-desktop) .desktop-brand { grid-column: 1; grid-row: 2; }
  :root :is(.terminal-page, .post-desktop) .desktop-tasks { grid-column: 2 / -1; grid-row: 2; }
  :root :is(.terminal-page, .post-desktop) .desktop-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  :root .desktop-panel .desktop-brand { font-size: 12px; }
  :root .desktop-panel .desktop-task { padding-inline: 4px; }
}
/* Small hardware lights leave the clock and task buttons in place. */
.desktop-activity { display: flex; align-items: center; gap: 12px; margin-left: auto; font: inherit; color: #8e8c96; }
.activity-indicator { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.activity-light { display: block; width: 5px; height: 5px; background: #373940; border: 1px solid #ffffff12; }
.activity-disk.is-busy { background: #e8bc72; box-shadow: 0 0 5px #e8bc7260; }
.activity-network.is-busy { background: #88bdab; box-shadow: 0 0 5px #88bdab60; }
:root :is(.terminal-page, .post-desktop) .desktop-date { margin-left: 0; }
@media (max-width: 700px) {
  .desktop-activity { grid-column: 1; grid-row: 1; margin: 0; gap: 8px; }
  :root :is(.terminal-page, .post-desktop) .desktop-panel .desktop-date { grid-column: 2; justify-self: end; }
}
:root :is(.terminal-page, .post-desktop) :is(button, a.desktop-task, .lightbox-full):active {
  translate: 0 1px;
}
@media (prefers-reduced-motion: reduce) {
  :root :is(.terminal-page, .post-desktop) :is(button, a.desktop-task, .lightbox-full):active { translate: none; }
}
/* Individual motion properties leave the drag transform intact. */
:is([data-desktop-window], .post-window) { transform-origin: top left; }
:root :is([data-desktop-window], .post-window) > .window-titlebar {
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
:root :is([data-desktop-window], .post-window) { transition: border-color 140ms ease, box-shadow 140ms ease; }
:root :is([data-desktop-window].is-active, .post-window) {
  border-color: #ffffff4d;
  box-shadow: 0 24px 72px #000a, 0 4px 20px #0008, inset 0 0 0 1px #0004;
}
:root [data-desktop-window]:not(.is-active) {
  border-color: #ffffff1f;
  box-shadow: 0 12px 32px #0005, 0 2px 8px #0004;
}
:root [data-desktop-window].is-dragging { box-shadow: 0 24px 64px #0009, 0 4px 16px #0006; }
@media (max-width: 700px) {
  :root :is(.terminal-page, .post-desktop) .desktop-date { grid-column: 1 / 3; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  :root :is([data-desktop-window], .post-window),
  :root :is([data-desktop-window], .post-window) > .window-titlebar { transition: none; }
}
/* Real window controls, with the same hit area on every screen. */
.window-controls button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 18px/1 ui-monospace, monospace;
  cursor: pointer;
}
.window-controls button:hover { background: #ffffff15; color: #fff; }
.window-controls button[data-window-action='close']:hover { background: #bc4148; }
.window-controls button:focus-visible { outline: 1px solid var(--terminal-accent); outline-offset: -3px; }
[data-desktop-window][hidden] { display: none !important; }
.desktop-task[aria-expanded='false']::before { opacity: .45; border-top-width: 1px; border-bottom-width: 3px; }
.terminal-page .desktop-terminals [data-desktop-window].is-maximized {
  position: fixed;
  inset: 48px 8px 8px;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
}
@media (max-width: 700px) {
  .window-controls button { width: 26px; }
  .terminal-page .desktop-terminals [data-desktop-window].is-maximized { inset: 76px 4px 4px; }
}

/* Translations are suspended while maximized and restored with the window. */
[data-desktop-window].is-maximized { transform: none !important; }
@media (min-width: 761px) and (pointer: fine) {
  [data-window-handle] { cursor: grab; touch-action: none; user-select: none; }
  .is-maximized [data-window-handle] { cursor: default; }
  .window-dragging, .window-dragging * { cursor: grabbing !important; user-select: none; }
}

/* Resize only the two desktop sessions; maximization suspends custom geometry. */
.terminal-page .desktop-terminals [data-desktop-window].is-resized:not(.is-maximized) {
  width: var(--window-user-width);
  height: var(--window-user-height);
  right: auto;
  bottom: auto;
}
.window-resize-handle { display: none; }
@media (min-width: 761px) and (pointer: fine) {
  [data-desktop-window]:not(.is-maximized) > .window-resize-handle { display: block; position: absolute; z-index: 10; touch-action: none; }
  .resize-n, .resize-s { left: 12px; right: 12px; height: 7px; cursor: ns-resize; }
  .resize-n { top: 0; } .resize-s { bottom: 0; }
  .resize-e, .resize-w { top: 12px; bottom: 12px; width: 7px; cursor: ew-resize; }
  .resize-e { right: 0; } .resize-w { left: 0; }
  .resize-nw, .resize-ne, .resize-sw, .resize-se { width: 12px; height: 12px; }
  .resize-nw, .resize-se { cursor: nwse-resize; }
  .resize-ne, .resize-sw { cursor: nesw-resize; }
  .resize-nw { top: 0; left: 0; } .resize-ne { top: 0; right: 0; }
  .resize-sw { bottom: 0; left: 0; } .resize-se { bottom: 0; right: 0; }
  .window-resizing, .window-resizing * { cursor: var(--window-resize-cursor) !important; user-select: none; }
}

/* Reflow by the window's width, independently of the browser viewport. */
.terminal-system { container: about-window / inline-size; }
.terminal-projects { container: projects-window / inline-size; }
@media (min-width: 761px) {
  @container about-window (max-width: 600px) {
    .terminal-page .terminal-system .terminal-logo { width: 100px; height: 114px; }
    .terminal-page .terminal-system .terminal-header { gap: 20px; }
    .terminal-page .terminal-system .terminal-logo::before { --terminal-grid-size: 2px; }
  }
  @container projects-window (max-width: 650px) {
    .terminal-page .terminal-projects .post-select { grid-template-columns: 64px 136px minmax(0, 1fr); }
    .terminal-projects .post-permissions { display: none; }
    .terminal-page .terminal-projects .post-date { grid-column: 2; }
    .terminal-page .terminal-projects .post-name { grid-column: 3; }
  }
}

/* Title bars keep their active-window appearance when reached with Tab. */
.window-titlebar:focus { outline: none !important; }

/* Edge-snap preview; it never intercepts the drag gesture. */
.window-snap-preview { position: fixed; z-index: 15; pointer-events: none; box-sizing: border-box; border: 2px solid var(--terminal-accent, #ef5754); border-radius: 8px; background: rgb(239 87 84 / 12%); }
.window-snap-preview[hidden] { display: none; }
@media (max-width: 760px), (pointer: coarse) { .window-snap-preview { display: none; } }
.terminal-page .desktop-terminals [data-desktop-window][data-snapped]:not(.is-maximized) {
  position: fixed;
  left: var(--window-snap-left);
  top: var(--window-snap-top);
  right: auto;
  bottom: auto;
  margin: 0;
  transform: none !important;
}

/* Use the same native 16px pixel grid throughout the desktop chrome. */
:root :is(.terminal-page, .post-desktop) :is(.desktop-panel, .window-titlebar, .window-controls button, .window-controls span) {
  font-family: 'Chunky Pixel Small Screen', monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  -webkit-font-smoothing: var(--terminal-font-smoothing, auto);
}
:root :is(.terminal-page, .post-desktop) .window-title { font-size: inherit; }

/* Pixel glyphs keep title bars consistent with the terminal's dotted alphabet. */
:root .window-titlebar .terminal-at {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 16px;
  vertical-align: -2px;
  overflow: hidden;
  text-indent: -9999px;
}
:root .window-titlebar .terminal-at::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: url('img/icons/at-dots.svg') center / 14px 16px no-repeat;
}
:root .window-controls button[data-window-action='maximize'] { position: relative; text-indent: -9999px; }
:root .window-controls button[data-window-action='maximize']::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: calc(50% - 8px);
  top: calc(50% - 8px);
  background: currentColor;
  mask: url('img/icons/maximize-dots.svg') center / 16px 16px no-repeat;
}
:root .window-controls button[data-window-action='maximize'][aria-pressed='true']::before {
  mask-image: url('img/icons/restore-dots.svg');
}
:root .window-controls button[data-window-action='maximize']::after { content: none; }

:root :is(.terminal-page .terminal-system, .terminal-page .terminal-projects, .post-window, .window-snap-preview) {
  border-radius: 8px 8px 0 0;
}
:root :is(.project-preview-image, .post-session .post-figure, .post-page .post-figure) {
  border-radius: 0;
}

/* The bottom accent line marks the active window's task. */
:root .desktop-task {
  padding: 4px 16px 0;
  justify-content: center;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
}
:root .desktop-task:is([aria-pressed='true'], [aria-current='location']) {
  background: #ffffff05;
  border-color: transparent;
  color: var(--terminal-text);
  box-shadow: inset 0 -2px 0 var(--terminal-accent);
}
:root :is([data-desktop-window].is-active, .post-window) > .window-titlebar {
  background: #2b2d35;
  color: var(--terminal-text);
  box-shadow: none;
}
:root [data-desktop-window]:not(.is-active) > .window-titlebar {
  background: #17181d;
  color: #77747f;
  box-shadow: none;
}

:root [data-desktop-window] > :is(.system-body, .projects-header, .terminal-workspace) {
  filter: brightness(1);
  transition: filter 160ms ease;
}
:root [data-desktop-window]:not(.is-active) > :is(.system-body, .projects-header, .terminal-workspace) {
  filter: brightness(.75);
}
@media (prefers-reduced-motion: reduce) {
  :root [data-desktop-window] > :is(.system-body, .projects-header, .terminal-workspace) { transition: none; }
}