/* icons-retro – original 32x32 / 16x16 pixel-art icon set for the Retro theme.
   Desktop (Windows 95 look): full-colour icons from retro-icons/*.svg.
   Phone (Retro 95 Mobile LCD): tinted variants from retro-icons/lcd/*-{ink,key}.svg.
   The SVGs are the master artwork; CSS uses their exact native-size PNG twins
   (same grid, generated together) so `image-rendering: pixelated` applies and
   the browser never re-rasterises vector edges at fractional offsets.
   Icons are only ever drawn at 16px or 32px CSS and every icon box is snapped
   to whole CSS pixels, so each art pixel maps to an integer block of device
   pixels at DPR 1, 2 and 3. */

/* ---------------------------------------------------------------- icon tokens */
html[data-theme=retro] {
  --ri-wissen: url('retro-icons/wissen.png');
  --ri-projekt: url('retro-icons/projekt.png');
  --ri-willkommen: url('retro-icons/willkommen.png');
  --ri-leistungen: url('retro-icons/leistungen.png');
  --ri-ablauf: url('retro-icons/ablauf.png');
  --ri-ueber: url('retro-icons/ueber.png');
  --ri-kontakt: url('retro-icons/kontakt.png');
  --ri-einstellungen: url('retro-icons/einstellungen.png');
  --ri-impressum: url('retro-icons/impressum.png');
  --ri-arrange: url('retro-icons/arrange.png');
  --ri-desktop: url('retro-icons/desktop.png');
  --ri-wissen-16: url('retro-icons/wissen-16.png');
  --ri-projekt-16: url('retro-icons/projekt-16.png');
  --ri-willkommen-16: url('retro-icons/willkommen-16.png');
  --ri-leistungen-16: url('retro-icons/leistungen-16.png');
  --ri-ablauf-16: url('retro-icons/ablauf-16.png');
  --ri-ueber-16: url('retro-icons/ueber-16.png');
  --ri-kontakt-16: url('retro-icons/kontakt-16.png');
  --ri-einstellungen-16: url('retro-icons/einstellungen-16.png');
  --ri-impressum-16: url('retro-icons/impressum-16.png');
  --ri-start-16: url('retro-icons/start-16.png');
  --ri-desktop-16: url('retro-icons/desktop-16.png');
}

/* Per-app assignment: one custom property (--ri / --ri16) per element. */
html[data-theme=retro] :is([data-open=wissen],[data-task=wissen],[data-window=wissen]) { --ri: var(--ri-wissen); --ri16: var(--ri-wissen-16); --ri-ink: url('retro-icons/lcd/wissen-ink.png'); --ri-key: url('retro-icons/lcd/wissen-key.png'); --ri-ink16: url('retro-icons/lcd/wissen-16-ink.png'); }
html[data-theme=retro] :is([data-open=projekt],[data-task=projekt],[data-window=projekt]) { --ri: var(--ri-projekt); --ri16: var(--ri-projekt-16); --ri-ink: url('retro-icons/lcd/projekt-ink.png'); --ri-key: url('retro-icons/lcd/projekt-key.png'); --ri-ink16: url('retro-icons/lcd/projekt-16-ink.png'); }
html[data-theme=retro] :is([data-open=willkommen],[data-task=willkommen],[data-window=willkommen]) { --ri: var(--ri-willkommen); --ri16: var(--ri-willkommen-16); --ri-ink: url('retro-icons/lcd/willkommen-ink.png'); --ri-key: url('retro-icons/lcd/willkommen-key.png'); --ri-ink16: url('retro-icons/lcd/willkommen-16-ink.png'); }
html[data-theme=retro] :is([data-open=leistungen],[data-task=leistungen],[data-window=leistungen]) { --ri: var(--ri-leistungen); --ri16: var(--ri-leistungen-16); --ri-ink: url('retro-icons/lcd/leistungen-ink.png'); --ri-key: url('retro-icons/lcd/leistungen-key.png'); --ri-ink16: url('retro-icons/lcd/leistungen-16-ink.png'); }
html[data-theme=retro] :is([data-open=ablauf],[data-task=ablauf],[data-window=ablauf]) { --ri: var(--ri-ablauf); --ri16: var(--ri-ablauf-16); --ri-ink: url('retro-icons/lcd/ablauf-ink.png'); --ri-key: url('retro-icons/lcd/ablauf-key.png'); --ri-ink16: url('retro-icons/lcd/ablauf-16-ink.png'); }
html[data-theme=retro] :is([data-open=ueber],[data-task=ueber],[data-window=ueber]) { --ri: var(--ri-ueber); --ri16: var(--ri-ueber-16); --ri-ink: url('retro-icons/lcd/ueber-ink.png'); --ri-key: url('retro-icons/lcd/ueber-key.png'); --ri-ink16: url('retro-icons/lcd/ueber-16-ink.png'); }
html[data-theme=retro] :is([data-open=kontakt],[data-task=kontakt],[data-window=kontakt]) { --ri: var(--ri-kontakt); --ri16: var(--ri-kontakt-16); --ri-ink: url('retro-icons/lcd/kontakt-ink.png'); --ri-key: url('retro-icons/lcd/kontakt-key.png'); --ri-ink16: url('retro-icons/lcd/kontakt-16-ink.png'); }
html[data-theme=retro] :is([data-open=einstellungen],[data-task=einstellungen],[data-window=einstellungen]) { --ri: var(--ri-einstellungen); --ri16: var(--ri-einstellungen-16); --ri-ink: url('retro-icons/lcd/einstellungen-ink.png'); --ri-key: url('retro-icons/lcd/einstellungen-key.png'); --ri-ink16: url('retro-icons/lcd/einstellungen-16-ink.png'); }
html[data-theme=retro] :is([data-open=impressum],[data-task=impressum],[data-window=impressum]) { --ri: var(--ri-impressum); --ri16: var(--ri-impressum-16); --ri-ink: url('retro-icons/lcd/impressum-ink.png'); --ri-key: url('retro-icons/lcd/impressum-key.png'); --ri-ink16: url('retro-icons/lcd/impressum-16-ink.png'); }
html[data-theme=retro] [data-command=arrange] { --ri: var(--ri-arrange); --ri-ink: url('retro-icons/lcd/arrange-ink.png'); --ri-key: url('retro-icons/lcd/arrange-key.png'); }
html[data-theme=retro] [data-command=desktop] { --ri: var(--ri-desktop); --ri-ink: url('retro-icons/lcd/desktop-ink.png'); --ri-key: url('retro-icons/lcd/desktop-key.png'); }

/* Shared: hide the old text glyphs / vector symbols wherever a bitmap replaces them. */
html[data-theme=retro] :is(.icon-art,.title-icon,.menu-icon,.dock-app-art,.task-button) :is(.retro-glyph,.os-symbol) { display: none !important; }
html[data-theme=retro] :is(.icon-art,.title-icon,.menu-icon,.start-button>span,.dock-app-art,.show-desktop),
html[data-theme=retro] .task-button::before {
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: center;
}

/* ================================================================== DESKTOP */

/* Desktop icons: a bare 32x32 icon above its label, as on the classic shell. */
html[data-theme=retro][data-device=desktop] .desktop-icon .icon-art,
html[data-theme=retro][data-device=desktop] .desktop-icon .icon-art.icon-wissen {
  position: relative;
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--ri) center / 32px 32px no-repeat;
  color: transparent;
  font-size: 0;
}
html[data-theme=retro][data-device=desktop] .desktop-icon { justify-content: flex-start; padding-top: 6px; gap: 5px; text-shadow: none; }
html[data-theme=retro][data-device=desktop] .desktop-icon > span:last-child {
  padding: 1px 3px;
  outline: 1px dotted transparent;
  outline-offset: -1px;
  color: #fff;
  font: 13px/16px Tahoma, Arial, sans-serif;
  text-shadow: none;
}
html[data-theme=retro][data-device=desktop] .desktop-icon:hover { background: none; }
/* Selected (keyboard focus): navy label with dotted focus ring, icon dithered with navy. */
html[data-theme=retro][data-device=desktop] .desktop-icon:focus-visible { background: none; outline: 0; }
html[data-theme=retro][data-device=desktop] .desktop-icon:is(:focus-visible,:active) > span:last-child {
  background: #000080;
  color: #fff;
  outline-color: #ffff80;
}
html[data-theme=retro][data-device=desktop] .desktop-icon .icon-art::after {
  content: '';
  display: none;
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(#000080 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  -webkit-mask: var(--ri) center / 32px 32px no-repeat;
  mask: var(--ri) center / 32px 32px no-repeat;
}
html[data-theme=retro][data-device=desktop] .desktop-icon:is(:focus-visible,:active) .icon-art::after { display: block; }

/* Window title bars: 16x16 icon. */
html[data-theme=retro][data-device=desktop] .title-icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px -3px 0 0; /* 27px content box: 1px nudge keeps the icon on whole pixels; tighter title gap */
  background-image: var(--ri16);
  background-size: 16px 16px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

/* Start menu: large 32x32 icons, like the top level of the classic Start menu. */
html[data-theme=retro][data-device=desktop] .start-menu-items .menu-icon {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  background-image: var(--ri);
  background-size: 32px 32px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
html[data-theme=retro][data-device=desktop] .start-menu-items :is(button,a) { min-height: 40px; padding-top: 4px; padding-bottom: 4px; gap: 10px; }

/* Taskbar: Start button logo, show-desktop and running-task buttons. */
html[data-theme=retro][data-device=desktop] .start-button > span {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  background-image: var(--ri-start-16);
  background-size: 16px 16px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
html[data-theme=retro][data-device=desktop] .start-button { width: 88px; justify-content: flex-start; gap: 6px; }
html[data-theme=retro][data-device=desktop] .start-button > span { margin-top: 1px; }
html[data-theme=retro][data-device=desktop] .show-desktop {
  width: 34px;
  min-width: 34px;
  background-position: 8px 12px;
  background-image: var(--ri-desktop-16);
  background-size: 16px 16px;
  color: transparent;
  font-size: 0;
}
html[data-theme=retro][data-device=desktop] .task-button { gap: 6px; }
html[data-theme=retro][data-device=desktop] .task-button::before {
  content: '';
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background-image: var(--ri16);
  background-size: 16px 16px;
}

/* ==================================================================== PHONE */

/* Snap the home grid to whole pixels (27dvh is fractional on most screens). */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html[data-theme=retro][data-device=phone] .desktop-icons { top: round(clamp(192px, 27dvh, 236px), 1px); }
}
@media (max-width: 600px) and (max-height:700px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) and (max-height:700px) {
  html[data-theme=retro][data-device=phone] .desktop-icons { top: 149px; }
}
@media (max-width: 600px) and (max-height:580px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) and (max-height:580px) {
  html[data-theme=retro][data-device=phone] .desktop-icons { top: 78px; }
}
html[data-theme=retro][data-device=phone] .desktop-icon { justify-content: flex-start; }

/* Home grid: 32x32 LCD (ink) icons on the pale tiles. */
html[data-theme=retro][data-device=phone] .desktop-icon .icon-art,
html[data-theme=retro][data-device=phone] .desktop-icon .icon-art.icon-wissen {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--ri-ink) center / 32px 32px no-repeat;
  color: transparent;
  font-size: 0;
}

/* Hardware soft keys: light (key) variants on the dark keys. */
html[data-theme=retro][data-device=phone] :is(.start-button > span, .dock-app-art) {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  background-size: 32px 32px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
html[data-theme=retro][data-device=phone] .start-button > span { background-image: url('retro-icons/lcd/start-key.png'); }
html[data-theme=retro][data-device=phone] .dock-app[data-dock] .dock-app-art { background-image: var(--ri-key); }
/* 32px icon + 4px gap + 12px label = 48px: centres on a whole pixel inside the 58px key content box. */
html[data-theme=retro][data-device=phone] :is(.start-button, .dock-app) { gap: 4px; }
html[data-theme=retro][data-device=phone] .dock-label { line-height: 12px; }

/* Start menu on the LCD: ink icons, swapped to light key icons on the dark highlight. */
html[data-theme=retro][data-device=phone] .start-menu-items .menu-icon {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  background-image: var(--ri-ink);
  background-size: 32px 32px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
html[data-theme=retro][data-device=phone] .start-menu-items :is(button,a):is(:hover,:focus-visible) .menu-icon { background-image: var(--ri-key); }

/* App title bar on the phone: 16x16 LCD icon before the window name. */
html[data-theme=retro][data-device=phone] .os-titlebar .title-icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 2px 0 4px;
  background-image: var(--ri-ink16);
  background-size: 16px 16px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}