/* Derek Online 98 desktop shell. Loaded after the main theme. */
:root {
  --win-face: #c0c0c0;
  --win-light: #dfdfdf;
  --win-white: #ffffff;
  --win-shadow: #808080;
  --win-dark: #404040;
  --win-black: #080808;
  --win-select: #6f1647;
}

.start-menu[hidden],
.start-submenu[hidden] { display: none !important; }

/* Windows 95/98 geometry is the point here: compact, square, and heavily beveled. */
.taskbar {
  height: 36px;
  gap: 3px;
  padding: 3px;
  align-items: stretch;
  color: #111;
  border: 0;
  border-top: 1px solid var(--win-white);
  background: var(--win-face);
  box-shadow: inset 0 1px var(--win-light), 0 -1px var(--win-shadow);
}

.start-button,
.task-button,
.task-newsletter {
  min-height: 28px;
  margin: 0;
  color: #111;
  border: 1px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  background: var(--win-face);
  box-shadow: inset 1px 1px var(--win-light), inset -1px -1px var(--win-shadow);
  font: 700 12px/1 var(--ui);
  text-shadow: none;
}

.start-button {
  width: 78px;
  flex: 0 0 78px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 2px 6px 2px 4px;
}

.start-button:hover,
.task-button:hover,
.task-newsletter:hover { color: #111; background: #d0d0d0; }

.start-button:active,
.start-button[aria-expanded="true"],
.task-button.is-active,
.task-newsletter:active {
  padding-top: 3px;
  padding-left: 7px;
  border-color: var(--win-shadow) var(--win-white) var(--win-white) var(--win-shadow);
  background-color: #b8b8b8;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.22) 75%),
    linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.22) 75%);
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
  box-shadow: inset 1px 1px var(--win-dark);
}

.start-mark {
  width: 19px;
  height: 18px;
  display: grid;
  grid-template-columns: repeat(2, 8px);
  grid-template-rows: repeat(2, 7px);
  gap: 1px;
  place-content: center;
  flex: 0 0 19px;
  padding: 1px;
  color: transparent;
  background: #111;
  transform: none;
}
.start-mark i { display: block; }
.start-mark i:nth-child(1) { background: #f63f91; }
.start-mark i:nth-child(2) { background: #50eedb; }
.start-mark i:nth-child(3) { background: #ff7548; }
.start-mark i:nth-child(4) { background: #c4f34d; }

.task-list {
  min-width: 0;
  flex: 1 1 auto;
  gap: 3px;
  padding: 0;
  overflow: hidden;
}
.task-button {
  min-width: 132px;
  max-width: 225px;
  padding: 0 9px;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.task-button.is-active { padding: 1px 8px 0 10px; }

.task-newsletter {
  width: 86px;
  flex: 0 0 86px;
  padding: 0 7px;
  border-left-color: var(--win-white);
}
.task-newsletter > span { margin-right: 4px; color: #6f1647; font-size: 14px; }

.tray {
  min-width: 104px;
  height: 28px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0 8px;
  color: #111;
  border: 1px solid;
  border-color: var(--win-shadow) var(--win-white) var(--win-white) var(--win-shadow);
  background: var(--win-face);
  box-shadow: inset 1px 1px var(--win-dark), inset -1px -1px var(--win-light);
  font: 11px var(--ui);
}
.tray-icon { width: 14px; color: #6f1647; text-align: center; font: 700 13px var(--ui); }
.tray-signal { color: #176657; }
.tray time { min-width: 48px; text-align: right; }

/* WinAmp-style desk band: unusual, but period-correct and kept deliberately compact. */
.taskbar-amp {
  width: 254px;
  flex: 0 0 254px;
  height: 28px;
  align-self: center;
  display: grid;
  grid-template-columns: 27px 29px minmax(0,1fr) 27px;
  margin: 0;
  border: 1px solid;
  border-color: var(--win-shadow) var(--win-white) var(--win-white) var(--win-shadow);
  background: #4b4c45;
  box-shadow: inset 1px 1px #252620, inset -1px -1px var(--win-light);
}
.taskbar-amp > button {
  min-width: 0;
  padding: 0;
  color: #171811;
  border: 0;
  border-right: 1px solid #2f302b;
  background: linear-gradient(#9a9b91,#686961);
  box-shadow: inset 1px 1px #bfc0b7, inset -1px -1px #3a3b35;
  cursor: pointer;
  font: 900 10px var(--mono);
}
.taskbar-amp > button:hover { color: #12140a; background: #a7ba36; }
.taskbar-amp .taskbar-amp-play { color: #c4d84b; background: #282a23; text-shadow: 0 0 4px rgba(196,216,75,.4); }
.taskbar-amp-screen {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) 25px;
  align-items: center;
  gap: 4px;
  padding: 0 5px !important;
  color: #b8cd42 !important;
  border: 1px inset #63645b !important;
  background: #090c07 !important;
  text-align: left;
}
.taskbar-amp-screen:hover { outline: 1px solid #a7ba36; outline-offset: -2px; }
.taskbar-amp-screen > span { color: #d5a62a; font: 900 8px var(--mono); }
.taskbar-amp-screen > strong { overflow: hidden; color: #b8cd42; font: 900 9px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.taskbar-amp-screen > i { height: 15px; display: flex; align-items: end; gap: 1px; }
.taskbar-amp-screen > i b { width: 3px; height: 3px; background: #9daf31; }
.taskbar-amp-screen > i b:nth-child(2) { height: 10px; }
.taskbar-amp-screen > i b:nth-child(3) { height: 6px; }
.taskbar-amp-screen > i b:nth-child(4) { height: 13px; }
.taskbar-amp.is-playing .taskbar-amp-screen > i b { animation: taskbar-eq .55s ease-in-out infinite alternate; }
.taskbar-amp.is-playing .taskbar-amp-screen > i b:nth-child(2) { animation-delay: .1s; }
.taskbar-amp.is-playing .taskbar-amp-screen > i b:nth-child(3) { animation-delay: .25s; }
.taskbar-amp.is-playing .taskbar-amp-screen > i b:nth-child(4) { animation-delay: .4s; }
@keyframes taskbar-eq { to { height: 3px; background: #d5a62a; } }

/* Start menu follows the Win95 pattern: brand rail, terse commands, cascading lists. */
.start-menu {
  position: fixed;
  z-index: 9000;
  left: 3px;
  bottom: 35px;
  width: 306px;
  height: auto;
  max-height: calc(100vh - 72px);
  display: flex;
  flex-direction: row;
  overflow: visible;
  color: #111;
  border: 1px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  background: var(--win-face);
  box-shadow: inset 1px 1px var(--win-light), inset -1px -1px var(--win-shadow), 3px 3px 0 rgba(0,0,0,.46);
}
.start-rail {
  width: 35px;
  flex: 0 0 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 0 10px;
  overflow: hidden;
  color: #fff;
  background: #64133f;
  border-right: 1px solid #2d0b20;
  box-shadow: inset 1px 0 #b14a78;
}
.start-rail strong,
.start-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0;
}
.start-rail strong { margin-top: auto; font: 700 21px var(--ui); text-shadow: 1px 1px #260918; }
.start-rail span { color: #dfdfdf; font: 700 10px var(--ui); }

.start-menu-panel {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--win-face);
}
.start-profile { display: none; }

.start-classic-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 3px 2px;
  scrollbar-color: var(--win-shadow) var(--win-face);
}
.start-classic-list > button,
.start-submenu > button,
.start-menu-panel > footer button {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 35px minmax(0,1fr) 13px;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  color: #111;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  text-align: left;
}
.start-classic-list > button > span:nth-child(2),
.start-submenu > button > span:nth-child(2) { min-width: 0; display: block; }
.start-classic-list strong,
.start-submenu strong,
.start-menu-panel > footer strong { font: 400 12px var(--ui); }
.start-classic-list strong::first-letter,
.start-submenu strong::first-letter,
.start-menu-panel > footer strong::first-letter { text-decoration: underline; }
.start-classic-list small,
.start-submenu small { display: none; }
.start-classic-list > button > b { justify-self: end; color: #111; font: 900 9px var(--ui); }
.start-classic-list > button:hover,
.start-classic-list > button:focus-visible,
.start-classic-list > button[aria-expanded="true"],
.start-submenu > button:hover,
.start-submenu > button:focus-visible,
.start-menu-panel > footer button:hover,
.start-menu-panel > footer button:focus-visible {
  color: #fff;
  background: var(--win-select);
  outline: 0;
}
.start-classic-list > button:hover b,
.start-classic-list > button[aria-expanded="true"] b { color: #fff; }
.start-classic-list hr {
  height: 2px;
  margin: 2px 4px;
  border: 0;
  border-top: 1px solid var(--win-shadow);
  border-bottom: 1px solid var(--win-white);
}

.classic-app-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #f63f91;
  background: transparent;
  filter: saturate(1.35) brightness(1.12) drop-shadow(1px 1px 0 #333);
  font: 900 23px var(--mono);
  text-shadow: 1px 1px #fff;
}
.classic-journal,
.classic-book,
.classic-contact { color: #ef1784; }
.classic-home,
.classic-watch,
.classic-photos,
.classic-find { color: #008c83; }
.classic-arcade,
.classic-programs,
.classic-projects,
.classic-run { color: #e05d18; }
.classic-music,
.classic-documents,
.classic-settings,
.classic-resources { color: #668700; }
.classic-advocacy,
.classic-gear,
.classic-about,
.classic-log,
.classic-now { color: #90246a; }
.start-classic-list > button:hover .classic-app-icon,
.start-classic-list > button:focus-visible .classic-app-icon,
.start-classic-list > button[aria-expanded="true"] .classic-app-icon,
.start-submenu > button:hover .classic-app-icon,
.start-submenu > button:focus-visible .classic-app-icon,
.start-menu-panel > footer button:hover .classic-app-icon {
  color: #ffe36a;
  filter: drop-shadow(1px 1px 0 #111);
  text-shadow: none;
}

.start-submenu {
  position: absolute;
  z-index: 2;
  left: calc(100% - 2px);
  width: 278px;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 2px;
  color: #111;
  border: 1px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  background: var(--win-face);
  box-shadow: inset 1px 1px var(--win-light), inset -1px -1px var(--win-shadow), 3px 3px 0 rgba(0,0,0,.42);
}
#start-programs { top: 176px; bottom: auto; }
#start-documents { top: 218px; bottom: auto; }
.start-submenu > header { display: none; }

.start-search {
  min-height: 42px;
  display: none;
  grid-template-columns: 22px 1fr auto;
  gap: 4px;
  padding: 4px;
  color: #111;
  border-top: 1px solid var(--win-shadow);
  background: var(--win-face);
}
.start-menu.is-finding .start-search { display: grid; }
.start-search > span { color: #64133f; font-size: 18px; }
.start-search input {
  height: 28px;
  padding: 0 6px;
  color: #111;
  border: 1px solid;
  border-color: var(--win-shadow) var(--win-white) var(--win-white) var(--win-shadow);
  background: #fff;
  box-shadow: inset 1px 1px var(--win-dark);
  font: 12px var(--ui);
}
.start-search input:focus { border-color: var(--win-shadow); outline: 1px dotted #111; }
.start-search kbd { padding: 3px 4px; color: #222; border: 1px solid var(--win-shadow); background: var(--win-light); font: 9px var(--ui); }
.start-empty { margin: 0; padding: 7px; color: #111; background: var(--win-face); font: 11px var(--ui); }

.start-menu-panel > footer {
  display: grid;
  padding: 2px;
  border-top: 1px solid var(--win-shadow);
  background: var(--win-face);
}
.start-menu-panel > footer button {
  grid-template-columns: 35px minmax(0,1fr);
  min-height: 42px;
  padding: 3px 5px;
}

@media (max-width: 1120px) and (min-width: 721px) {
  .taskbar-amp { width: 212px; flex-basis: 212px; grid-template-columns: 26px 28px minmax(0,1fr) 26px; }
  .taskbar-amp-screen { grid-template-columns: minmax(0,1fr) 23px; }
  .taskbar-amp-screen > span { display: none; }
  .task-newsletter { width: 68px; flex-basis: 68px; }
}
@media (max-width: 900px) and (min-width: 721px) {
  .task-newsletter { display: none; }
  .task-button { min-width: 105px; }
  .tray { min-width: 88px; padding: 0 5px; gap: 4px; }
  .tray-icon:first-child { display: none; }
}
@media (max-width: 780px) and (min-width: 721px) {
  .taskbar-amp { width: 176px; flex-basis: 176px; }
}
@media (max-width: 720px) {
  .start-menu { display: none !important; }
}