/* SVG icon masks inherit the current text color. */
.pixel-icon,
.app-blog-icon,
.app-about-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: var(--pixel-icon) center / 16px 16px no-repeat;
  vertical-align: middle;
  pointer-events: none;
}
.app-blog-icon { --pixel-icon: url('img/icons/file-grid-24.svg?v=2'); }
.app-about-icon { --pixel-icon: url('img/icons/person-grid-24.svg'); }
.icon-photo { --pixel-icon: url('img/icons/White/photo.svg'); }
.icon-times { --pixel-icon: url('img/icons/White/times.svg'); }
.icon-minus { --pixel-icon: url('img/icons/White/minus.svg'); }
.icon-arrow-left { --pixel-icon: url('img/icons/White/arrow-left.svg'); }
.icon-arrow-right { --pixel-icon: url('img/icons/White/arrow-right.svg'); }
.icon-arrow-up { --pixel-icon: url('img/icons/White/arrow-up.svg'); }
.icon-battery { --pixel-icon: url('img/icons/battery-grid.svg?v=2'); }

/* A soft 2px grid modulates opacity without cutting holes in fine SVG strokes. */
@supports (mask-composite: intersect) {
  .pixel-icon {
    mask-image: var(--pixel-icon),
      repeating-linear-gradient(90deg, #000 0 1px, #0009 1px 2px),
      repeating-linear-gradient(0deg, #000 0 1px, #0009 1px 2px);
    mask-size: 16px 16px, 2px 2px, 2px 2px;
    mask-position: center, 0 0, 0 0;
    mask-repeat: no-repeat, repeat, repeat;
    mask-composite: intersect;
  }
}

/* Real 24px dot icons; their visible shapes stay centered beside the 16px text. */
.app-blog-icon,
.app-about-icon {
  width: 24px;
  height: 24px;
  mask: var(--pixel-icon) center / 24px 24px no-repeat;
}
.desktop-task :is(.app-blog-icon, .app-about-icon) {
  align-self: center;
  margin-top: 0;
}
.window-titlebar > :is(.app-blog-icon, .app-about-icon) {
  align-self: flex-start;
  margin-top: 9px;
}
@media (max-width: 700px) {
  :root .desktop-panel .desktop-task { padding-inline: 4px; gap: 4px; }
  :root :is(.terminal-page, .post-desktop) .desktop-panel {
    grid-template-rows: 28px 39px;
  }
}

/* App icons remain quieter than the title; window controls use their original glyphs. */
.window-titlebar > .window-app-icon { opacity: .6; }

.lightbox :is(.lightbox-close, .lightbox-prev, .lightbox-next) {
  display: grid;
  place-items: center;
}
.lightbox .lightbox-full {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}