/* ===========================================================================
   XP "Luna" shell — active when html.shell-xp is set (`ShellStyle: "xp"` in
   themes/pink.json and themes/blue-y2k.json).

   Structure follows Windows XP's Luna visual style: tall gradient title bars
   with rounded top corners and a thick colored frame, 21px caption buttons,
   a full-height start button with a rounded right edge, a lighter
   notification area, the two-column Start menu with its header/footer bands,
   Explorer's task pane, Tahoma 8pt UI text.

   Every color comes from a --luna-* variable defined in the theme JSON, so a
   new XP-style theme only needs a palette. Fallbacks below are Luna Blue.
   =========================================================================== */

html.shell-xp body,
html.shell-xp #desktop,
html.shell-xp button,
html.shell-xp input,
html.shell-xp select,
html.shell-xp textarea {
  font-family: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
}

/* ---------------------------------------------------------------- windows */

html.shell-xp .app-window {
  border: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 4px 4px;
  background: var(--luna-frame, #0831d9);
  box-shadow:
    inset 0 0 0 1px var(--luna-frame-dark, #001ea0),
    2px 4px 12px rgba(0, 0, 0, 0.32);
}

html.shell-xp .app-window:not(.active) {
  background: var(--luna-frame-inactive, #7a96df);
  box-shadow:
    inset 0 0 0 1px var(--luna-frame-inactive-dark, #6a83c9),
    1px 2px 8px rgba(0, 0, 0, 0.22);
}

html.shell-xp .window-titlebar {
  height: 30px;
  min-height: 30px;
  margin: 0 -4px;
  padding: 0 5px 0 8px;
  gap: 5px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: var(--luna-titlebar, linear-gradient(#0997ff, #0053ee 8%, #0050ee 40%, #0066ff 88%, #003dd7));
  color: #fff;
  text-shadow: 1px 1px 0 var(--luna-title-shadow, #0f1089);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 var(--luna-frame-dark, #001ea0),
    inset -1px 0 0 var(--luna-frame-dark, #001ea0);
}

html.shell-xp .app-window:not(.active) .window-titlebar {
  background: var(--luna-titlebar-inactive, linear-gradient(#a5b8e8, #7a96df));
  color: var(--luna-title-inactive-text, rgba(255, 255, 255, 0.86));
  text-shadow: none;
}

html.shell-xp .window-title {
  font: 700 13px/1 "Trebuchet MS", Tahoma, sans-serif;
  letter-spacing: 0.2px;
}

html.shell-xp .window-icon {
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
}

html.shell-xp .window-controls {
  gap: 2px;
}

html.shell-xp .window-minimize,
html.shell-xp .window-maximize,
html.shell-xp .window-close {
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 3px;
  background: var(--luna-btn, radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%));
  color: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18);
  transform: none;
}

html.shell-xp .window-minimize:hover,
html.shell-xp .window-maximize:hover {
  background: var(--luna-btn-hover, radial-gradient(circle at 90% 90%, #1d6ff3 0%, #3b7ff0 55%, #6b97ec 70%, #c8d8f6 90%, #fff 100%));
}

html.shell-xp .window-close {
  background: var(--luna-close, radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%));
}

html.shell-xp .window-close:hover {
  background: var(--luna-close-hover, radial-gradient(circle at 90% 90%, #e2580c 0%, #ef7c3e 55%, #e48c5c 70%, #ffe1d2 90%, #fff 100%));
}

html.shell-xp .window-minimize:active,
html.shell-xp .window-maximize:active,
html.shell-xp .window-close:active {
  filter: brightness(0.86);
  transform: none;
}

html.shell-xp .app-window:not(.active) .window-controls {
  filter: saturate(0.55) brightness(1.08);
}

html.shell-xp .caption-glyph {
  width: 11px;
  height: 11px;
}

html.shell-xp .caption-glyph-close {
  stroke-width: 2.1;
}

html.shell-xp .window-content {
  margin: 0;
  border: 0;
  background: var(--luna-face, #ece9d8);
}

html.shell-xp .window-resize-handle {
  right: 4px;
  bottom: 4px;
}

/* ---------------------------------------------------------------- taskbar */

html.shell-xp #taskbar {
  height: 30px;
  min-height: 30px;
  padding: 0;
  gap: 6px;
  border-top: 0;
  background: var(--luna-taskbar, linear-gradient(#1f2f86, #3165c4 3%, #3682e5 6%, #4490e6 10%, #2b71e0 15%, #2157d6 38%, #2562df 86%, #1941a5));
}

html.shell-xp #start-btn {
  align-self: stretch;
  height: 30px;
  margin: 0;
  padding: 0 22px 0 9px;
  gap: 5px;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: var(--luna-start, linear-gradient(#3c8f3c, #79c779 6%, #4caf4c 18%, #3a9a3a 50%, #379437 85%, #2a742a));
  color: #fff;
  font: italic 700 18px/1 "Franklin Gothic Medium", "Trebuchet MS", Tahoma, sans-serif;
  letter-spacing: 0.3px;
  text-transform: lowercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow:
    inset -1px 0 1px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    2px 0 3px rgba(0, 0, 0, 0.35);
}

html.shell-xp #start-btn:hover {
  filter: brightness(1.08);
}

html.shell-xp #start-btn:active,
html.shell-xp #start-btn.active {
  filter: brightness(0.86);
  border: 0;
}

html.shell-xp .start-glyph {
  width: 20px;
  height: 20px;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.45));
}

html.shell-xp #taskbar-windows {
  align-items: center;
  gap: 3px;
  padding: 0 2px;
}

html.shell-xp .taskbar-btn {
  flex: 0 1 160px;
  height: 24px;
  min-width: 0;
  max-width: 160px;
  padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 3px;
  background: var(--luna-task, linear-gradient(#3c81f3, #3c81f3));
  color: var(--luna-task-text, #fff);
  font-size: 11px;
  text-shadow: var(--luna-task-text-shadow, 0 1px 1px rgba(0, 0, 0, 0.35));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45);
}

html.shell-xp .taskbar-btn:hover {
  background: var(--luna-task-hover, linear-gradient(#5a9cff, #4b8ff7));
}

html.shell-xp .taskbar-btn.active {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: var(--luna-task-active, linear-gradient(#1e52b7, #2a64c9));
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.45);
}

html.shell-xp #taskbar-right {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  background: var(--luna-tray, linear-gradient(#0c59b9, #139ee9 4%, #18b5f2 8%, #139beb 15%, #1290e8 50%, #0d8dea 85%, #0d9ff1 95%, #0f9eed));
  border-left: 1px solid var(--luna-tray-edge, #1042af);
  box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.45);
}

html.shell-xp #taskbar-brand {
  display: none;
}

html.shell-xp #taskbar-tray-buttons {
  display: flex;
  gap: 2px;
}

html.shell-xp #reset-layout-btn,
html.shell-xp #show-desktop-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--luna-tray-text, #fff);
  text-shadow: none;
  box-shadow: none;
}

html.shell-xp #reset-layout-btn:hover,
html.shell-xp #show-desktop-btn:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.15);
}

html.shell-xp #clock {
  min-height: 0;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--luna-tray-text, #fff);
  font-size: 11px;
  text-shadow: var(--luna-tray-text-shadow, 0 1px 1px rgba(0, 0, 0, 0.3));
}

html.shell-xp #clock .clock-date {
  display: none;
}

/* ------------------------------------------------------------- start menu */

html.shell-xp #start-menu {
  left: 0;
  bottom: 30px;
  width: 386px;
  border: 1px solid var(--luna-frame-dark, #001ea0);
  border-radius: 7px 7px 0 0;
  overflow: visible;
  background: var(--luna-frame, #0831d9);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
}

html.shell-xp .start-menu-top {
  min-height: 58px;
  padding: 6px 8px;
  border-radius: 6px 6px 0 0;
  background: var(--luna-titlebar, #0050ee);
  color: #fff;
  font: 700 14px/1.2 "Trebuchet MS", Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html.shell-xp .start-user-picture {
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

html.shell-xp .start-menu-body {
  position: relative;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  border-top: 0;
}

html.shell-xp .start-menu-body::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--luna-accent-line, linear-gradient(90deg, transparent, #f99736 30%, #f99736 70%, transparent));
  z-index: 1;
}

html.shell-xp .start-col {
  padding: 8px 4px 4px;
  gap: 0;
}

html.shell-xp .start-col-left {
  background: #fff;
  border-right: 0;
}

html.shell-xp .start-col-right {
  background: var(--luna-startmenu-right, #d3e5fa);
  border-left: 1px solid var(--luna-startmenu-right-border, #95bdee);
}

html.shell-xp .start-item {
  min-height: 0;
  padding: 3px 6px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  color: #000;
  font-size: 11px;
  font-weight: 400;
}

html.shell-xp .start-col-left > .start-item {
  padding: 4px 6px;
}

html.shell-xp .start-col-left > .start-item img {
  width: 30px;
  height: 30px;
}

html.shell-xp .start-col-left > .start-item:nth-of-type(-n+2) {
  font-weight: 700;
}

html.shell-xp .start-item.secondary {
  color: var(--luna-startmenu-right-text, #00136b);
  font-weight: 700;
}

html.shell-xp .start-col-right .start-item img {
  width: 22px;
  height: 22px;
}

html.shell-xp .start-item:hover,
html.shell-xp .start-item.secondary:hover {
  background: var(--luna-select, #316ac5);
  color: var(--luna-select-text, #fff);
}

html.shell-xp .start-all-programs {
  margin: auto 0 0;
  padding: 10px 8px 6px;
  border: 0;
  background:
    linear-gradient(90deg, transparent, var(--luna-startmenu-right-border, #95bdee), transparent) top / 100% 1px no-repeat;
  color: #000;
  font-size: 11px;
  font-weight: 700;
}

html.shell-xp .start-all-programs:hover,
html.shell-xp #start-menu.show-all-programs .start-all-programs {
  background-color: var(--luna-select, #316ac5);
  color: var(--luna-select-text, #fff);
}

html.shell-xp .start-all-arrow {
  position: relative;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 2px;
  background: var(--luna-start, #3a9a3a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

html.shell-xp .start-all-arrow::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 6px solid #fff;
}

/* All Programs is a flyout in XP, so the pinned list stays visible. */
html.shell-xp #start-menu.show-all-programs .start-col-left > .start-item {
  display: flex;
}

html.shell-xp .start-all-list {
  position: absolute;
  left: calc(100% - 4px);
  bottom: 2px;
  z-index: 5;
  min-width: 200px;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--luna-menu-border, #aca899);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

html.shell-xp .start-all-list .start-item img {
  width: 16px;
  height: 16px;
}

html.shell-xp .start-all-heading,
html.shell-xp .start-menu-search {
  display: none;
}

html.shell-xp .start-menu-footer {
  padding: 6px 8px;
  gap: 4px;
  justify-content: flex-end;
  background: var(--luna-titlebar, #0050ee);
}

html.shell-xp .start-footer-btn {
  padding: 3px 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

html.shell-xp .start-footer-btn img {
  width: 22px;
  height: 22px;
}

html.shell-xp .start-footer-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------- desktop icons */

html.shell-xp .desktop-icon,
html.shell-xp .desktop-icon:hover {
  background: transparent;
  outline: none;
}

html.shell-xp .desktop-icon span:last-child {
  padding: 0 2px;
  font-size: 11px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85);
}

html.shell-xp .desktop-icon.selected span:last-child {
  background: var(--luna-select, #316ac5);
  color: #fff;
  text-shadow: none;
}

html.shell-xp .desktop-icon.selected .emoji img {
  filter: drop-shadow(0 0 0 var(--luna-select, #316ac5)) brightness(0.8) sepia(0.2);
}

/* ---------------------------------------------------------- context menus */

html.shell-xp #context-menu {
  padding: 2px;
  border: 1px solid var(--luna-menu-border, #aca899);
  border-radius: 0;
  background: #fff;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
}

html.shell-xp .context-menu-item {
  padding: 3px 20px;
  border-radius: 0;
  color: #000;
  font-size: 11px;
}

html.shell-xp .context-menu-item:hover:not(:disabled),
html.shell-xp .context-menu-item:focus-visible {
  background: var(--luna-select, #316ac5);
  color: var(--luna-select-text, #fff);
}

html.shell-xp .context-menu-sep {
  margin: 3px 1px;
  background: var(--luna-menu-border, #aca899);
}

/* ---------------------------------------------------------- push buttons */

html.shell-xp :is(.xp-note-btn, .xp-ie-btn, .xp-paint-btn, .xp-image-btn, .xp-audio-btn,
  .xp-ms-menu-btn, .shell-dialog-btn, .xp-mail-attachment-save, .xp-saveas-buttons button) {
  min-height: 23px;
  padding: 2px 10px;
  border: 1px solid var(--luna-pushbtn-border, #003c74);
  border-radius: 3px;
  background: var(--luna-pushbtn-face, linear-gradient(#fff, #f4f4f0 60%, #e3e3db));
  color: #000;
  font-size: 11px;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.06);
  text-shadow: none;
}

html.shell-xp :is(.xp-note-btn, .xp-ie-btn, .xp-paint-btn, .xp-image-btn, .xp-audio-btn,
  .xp-ms-menu-btn, .shell-dialog-btn, .xp-mail-attachment-save, .xp-saveas-buttons button):hover {
  box-shadow:
    inset 1px 1px 0 var(--luna-pushbtn-glow, #ffc56b),
    inset -1px -1px 0 var(--luna-pushbtn-glow, #ffc56b),
    inset 0 0 0 2px color-mix(in srgb, var(--luna-pushbtn-glow, #ffc56b) 45%, transparent);
}

html.shell-xp :is(.xp-note-btn, .xp-ie-btn, .xp-paint-btn, .xp-image-btn, .xp-audio-btn,
  .xp-ms-menu-btn, .shell-dialog-btn, .xp-mail-attachment-save, .xp-saveas-buttons button):active {
  background: var(--luna-pushbtn-pressed, linear-gradient(#e3e3db, #f4f4f0));
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.18);
}

html.shell-xp .window-content :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select) {
  border: 1px solid var(--luna-field-border, #7f9db9);
  border-radius: 0;
}

/* ------------------------------------------------------------- mail */

/* Outlook Express toolbar: flat face, raised rounded button on hover. */
html.shell-xp .xp-mail-toolbar {
  background: var(--luna-face, #ece9d8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 0 #fff;
}

html.shell-xp .xp-mail-tool {
  color: #000;
}

html.shell-xp .xp-mail-tool:hover:not(:disabled),
html.shell-xp .xp-mail-tool:focus-visible {
  border-color: rgba(0, 0, 0, 0.18);
  background: linear-gradient(#fff, var(--luna-face, #ece9d8));
}

/* ------------------------------------------------------------- scrollbars */

html.shell-xp ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

html.shell-xp ::-webkit-scrollbar-track {
  background: var(--luna-scroll-track, #f3f1ec);
}

html.shell-xp ::-webkit-scrollbar-thumb {
  border: 1px solid var(--luna-scroll-border, #b5c8f2);
  border-radius: 3px;
  background: var(--luna-scroll-thumb, linear-gradient(90deg, #c8d6fb, #b9cbf3));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7);
}

html.shell-xp ::-webkit-scrollbar-corner {
  background: var(--luna-face, #ece9d8);
}

/* --------------------------------------------------------------- explorer */

html.shell-xp .window-content:has(> .xp-explorer-classic) {
  padding: 0;
  background: #fff;
}

html.shell-xp .xp-explorer-classic {
  background: var(--luna-face, #ece9d8);
  color: #000;
}

html.shell-xp .xp-menubar,
html.shell-xp .xp-explorer-classic .xp-toolbar,
html.shell-xp .xp-addressrow {
  background: var(--luna-face, #ece9d8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 0 #fff;
}

html.shell-xp .xp-menubar-item:hover {
  background: var(--luna-select, #316ac5);
  color: var(--luna-select-text, #fff);
}

html.shell-xp .xp-tb-btn {
  color: #000;
}

html.shell-xp .xp-tb-btn:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.18);
  background: linear-gradient(#fff, var(--luna-face, #ece9d8));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

html.shell-xp .xp-tb-sep {
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 1px 0 0 #fff;
}

html.shell-xp .xp-address-label {
  color: #444;
}

html.shell-xp .xp-address-field {
  border-color: var(--luna-field-border, #7f9db9);
}

html.shell-xp .xp-explorer-classic .xp-explorer-body {
  grid-template-columns: 196px minmax(0, 1fr);
}

html.shell-xp .xp-taskpane {
  border: 0;
  background: var(--luna-taskpane-bg, linear-gradient(#7ba2e7, #6375d6));
}

html.shell-xp .xp-taskgroup-head {
  background: var(--luna-taskgroup-head, linear-gradient(90deg, #fff, #c6d3f7));
  color: var(--luna-taskgroup-head-text, #215dc6);
}

html.shell-xp .xp-taskgroup-head:hover {
  color: var(--luna-taskgroup-head-hover, #428eff);
}

html.shell-xp .xp-taskgroup-head::after {
  box-shadow: inset 0 0 0 1px var(--luna-taskgroup-border, #b2c4f0);
}

html.shell-xp .xp-taskgroup-body {
  background: var(--luna-taskgroup-body, #d6dff7);
  border: 1px solid #fff;
  border-top: 0;
}

html.shell-xp .xp-taskgroup-body .xp-side-link {
  color: var(--luna-taskgroup-link, #215dc6);
}

html.shell-xp .xp-taskgroup-details .xp-details-title {
  font-weight: 700;
}

html.shell-xp .xp-explorer-classic .xp-files {
  border: 0;
  background: #fff;
}

html.shell-xp .xp-explorer-classic .xp-file-item {
  color: #000;
  border: 0;
  background: transparent;
}

html.shell-xp .xp-explorer-classic .xp-file-item.selected .xp-file-label {
  background: var(--luna-select, #316ac5);
  color: var(--luna-select-text, #fff);
}

html.shell-xp .xp-explorer-classic .xp-file-item.selected img {
  filter: brightness(0.82) sepia(0.15);
}

html.shell-xp .xp-statusbar {
  background: var(--luna-face, #ece9d8);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
}

html.shell-xp .xp-statusbar-zone {
  border-left-color: rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------ phone tweaks */

html.shell-xp.is-phone .xp-taskpane,
html.shell-xp.is-phone .xp-menubar,
html.shell-xp.is-phone .xp-tb-label,
html.shell-xp.is-phone .xp-statusbar-zone {
  display: none;
}

html.shell-xp.is-phone .xp-explorer-classic .xp-explorer-body {
  grid-template-columns: minmax(0, 1fr);
}

html.shell-xp.is-phone .app-window {
  border-radius: 0;
}

html.shell-xp.is-phone .window-titlebar {
  border-radius: 0;
}