/* Homepage Windows 95 tokens and controls, isolated from independent app styles. */
.has-desktop95, .retro-next {
  color-scheme: light;
  --desktop: #008080;
  --face: #c0c0c0;
  --paper: #fff;
  --ink: #161616;
  --muted: #505050;
  --navy: #000080;
  --raised: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --sunken: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --ui-font: Tahoma, 'MS Sans Serif', Verdana, sans-serif;
}
:where(.has-desktop95, .retro-next) * { box-sizing: border-box; }
html:has(body.has-desktop95) { scroll-behavior: smooth; scroll-padding-top: 20px; }
.has-desktop95, .retro-next { margin: 0; background: var(--desktop); color: var(--ink); font: 14px/1.5 var(--ui-font); }
:where(.has-desktop95, .retro-next) a { color: var(--navy); }
:where(.has-desktop95, .retro-next) button, :where(.has-desktop95, .retro-next) input, :where(.has-desktop95, .retro-next) select, :where(.has-desktop95, .retro-next) textarea { font: inherit; }
:where(.has-desktop95, .retro-next) button, :where(.has-desktop95, .retro-next) a { -webkit-tap-highlight-color: transparent; }
:where(.has-desktop95, .retro-next) button { cursor: pointer; }
:where(.has-desktop95, .retro-next) button:disabled { cursor: default; color: #666; text-shadow: 1px 1px white; }
:where(.has-desktop95, .retro-next) :focus-visible { outline: 2px dotted currentColor; outline-offset: 3px; }
:where(.has-desktop95, .retro-next) [hidden] { display: none !important; }
.icon95 { width: 32px; height: 32px; flex: 0 0 auto; image-rendering: pixelated; }
.window95 { padding: 3px; background: var(--face); box-shadow: var(--raised), 3px 3px 0 #004848; min-width: 0; }
.title95 { min-height: 29px; display: flex; align-items: center; gap: 7px; padding: 3px 5px; color: white; background: var(--navy); font-weight: bold; font-size: 12px; }
.title95 .icon95 { width: 18px; height: 18px; }
.title95 > :nth-child(2) { flex: 1; }
.title95 .window-label { flex: 1; }
:where(.has-desktop95, .retro-next) .window-control { width: 23px; min-height: 22px; padding: 0; border: 0; color: black; background: var(--face); box-shadow: var(--raised); font-weight: bold; line-height: 20px; }
.btn95 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; min-height: 38px; border: 0; border-radius: 0; background: var(--face); box-shadow: var(--raised); color: black; text-decoration: none; font-weight: normal; }
.btn95:hover { background: #d4d4d4; }
.btn95:active, .btn95[aria-pressed=true], .btn95[aria-expanded=true] { box-shadow: var(--sunken); background: #ddd; }
.btn95.primary { outline: 1px solid #000; outline-offset: 1px; font-weight: bold; }
.inset95 { background: white; padding: 12px; box-shadow: var(--sunken); }
:where(.has-desktop95, .retro-next) .skip-link { position: fixed; left: 12px; top: -100px; z-index: 1000; padding: 10px; background: #fff; color: #000080; }
:where(.has-desktop95, .retro-next) .skip-link:focus { top: 10px; }
.taskbar95 { position: fixed; bottom: 0; left: 0; right: 0; min-height: 43px; padding: 4px 6px max(4px, env(safe-area-inset-bottom)); display: flex; gap: 7px; align-items: center; background: var(--face); box-shadow: inset 0 1px white; z-index: 100; }
.taskbar95 .btn95 { min-height: 33px; padding: 4px 10px; }
.start95 { font-weight: bold; font-size: 15px; }
.start95 .icon95 { width: 24px; height: 24px; }
.task95 { width: min(240px, 40vw); justify-content: flex-start; background: #ddd; box-shadow: var(--sunken); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tray95 { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 5px 10px; box-shadow: inset 1px 1px #808080, inset -1px -1px white; white-space: nowrap; font-size: 12px; }
.start-menu95 { position: fixed; bottom: calc(46px + env(safe-area-inset-bottom)); left: 5px; width: 275px; max-width: calc(100vw - 10px); padding: 4px 4px 4px 37px; background: var(--face); box-shadow: var(--raised); z-index: 101; }
.start-menu95::before { content: 'Ballzatram 95'; writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: 3px; top: 3px; bottom: 3px; padding: 12px 3px; font-size: 20px; font-weight: bold; color: white; background: #808080; }
.start-menu95 a { display: flex; align-items: center; gap: 12px; padding: 10px; color: black; text-decoration: none; }
.start-menu95 a:hover, .start-menu95 a:focus-visible { background: var(--navy); color: white; outline-offset: -3px; }
.start-menu95 a + a { border-top: 1px solid #aaa; }
.site-bar95 { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 6px 12px; background: var(--face); box-shadow: var(--raised); }
.site-bar95 a { color: black; padding: 5px; text-decoration: none; }
.site-bar95 a:hover { background: var(--navy); color: white; }
.site-bar95 strong { margin-right: auto; }
body.has-desktop95 { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
@media(max-width:600px) { .tray-label95 { display:none; } .btn95 { min-height:44px; } :where(.has-desktop95, .retro-next) .window-control { min-width:28px; min-height:28px; } }
@media(prefers-reduced-motion:reduce) { html:has(body.has-desktop95) { scroll-behavior:auto; } :where(.has-desktop95, .retro-next) *, :where(.has-desktop95, .retro-next) *::before, :where(.has-desktop95, .retro-next) *::after { animation:none !important; transition:none !important; } }
@media print { .taskbar95, .start-menu95, .site-bar95 { display:none; } .has-desktop95, .retro-next { padding:0; background:white; } }