/* Windows 2000: the desktop with the cover of what's on air as its wallpaper, windows with blue gradient title bars,
   3D bevelled grey controls, the system's pixel icons (win2k-icons.js), Tahoma, the Start menu with the cabbage
   instead of the flag, the taskbar with the player, the clock and the theme in the tray. win2k.js builds the desktop;
   pages render inside the windows unchanged, their content on sunken white panels. Light: the classic scheme.
   Dark: charcoal panels under the same navy title bars. */
[data-design="win2k"] {
  --desk: #3a6ea5;
  --face: #d4d0c8;
  --win: #ffffff;
  --text: #000;
  --muted: #404040;
  --b-hi: #ffffff; --b-lt: #d4d0c8; --b-sh: #808080; --b-dk: #404040;
  --title1: #0a246a; --title2: #a6caf0; --title-off1: #808080; --title-off2: #c0c0c0; --title-text: #fff; --title-off-text: #d4d0c8;
  --sel: #0a246a; --sel-text: #fff;
  --tip: #ffffe1; --tip-border: #000;
  --link: #0000ee; --eyebrow: #0a246a;
  --bg: var(--face); --side: var(--face); --card: var(--win); --card-2: var(--win); --line: #808080;
  --accent: #0a246a; --accent-ink: #fff; --accent-soft: rgb(10 36 106 / 0.12); --danger: #c00000;
  --lv1: #806000; --lv2: #00508c; --lv3: #602090; --lv4: #404040; --lv5: #c00000;
  --raised: inset -1px -1px var(--b-dk), inset 1px 1px var(--b-hi), inset -2px -2px var(--b-sh), inset 2px 2px var(--b-lt);
  --sunken: inset 1px 1px var(--b-sh), inset -1px -1px var(--b-hi), inset 2px 2px var(--b-dk), inset -2px -2px var(--b-lt);
  --wall-filter: blur(22px) saturate(1.15);
  color-scheme: light;
}
[data-design="win2k"][data-theme="dark"] {
  --desk: #1f3b58; --face: #3a3a3a; --win: #262626; --text: #e8e8e8; --muted: #a8a8a8;
  --b-hi: #5e5e5e; --b-lt: #484848; --b-sh: #222; --b-dk: #101010;
  --title1: #0a246a; --title2: #3d6fb6; --title-off1: #4a4a4a; --title-off2: #6a6a6a; --title-text: #fff; --title-off-text: #b4b4b4;
  --sel: #24508f; --sel-text: #fff;
  --tip: #3d3b2b; --tip-border: #8f8b6a;
  --link: #8cc8ff; --eyebrow: #8cc8ff;
  --line: #5a5a5a;
  --accent: #3d6fb6; --accent-soft: rgb(61 111 182 / 0.28); --danger: #ff6b6b;
  --lv1: #f0c850; --lv2: #6cb8ff; --lv3: #d09cff; --lv4: #c8c8c8; --lv5: #ff6b6b;
  --wall-filter: blur(22px) saturate(1.1) brightness(0.55);
  color-scheme: dark;
}

[data-design="win2k"] body {
  grid-template: "main" 1fr "bar" auto / 100%;
  font: 12px/1.45 Tahoma, "Segoe UI", Verdana, sans-serif; background: var(--desk); color: var(--text);
}
[data-design="win2k"] h1, [data-design="win2k"] h2, [data-design="win2k"] h3, [data-design="win2k"] .tile-value { font-family: Tahoma, "Segoe UI", Verdana, sans-serif; letter-spacing: 0; }
[data-design="win2k"] *, [data-design="win2k"] *::before, [data-design="win2k"] *::after { border-radius: 0 !important; }
[data-design="win2k"] .side, [data-design="win2k"] .tabs, [data-design="win2k"] .win .head { display: none !important; }
[data-design="win2k"] :focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
[data-design="win2k"] a { color: var(--link); }

/* the icons: pixel pictures (win2k-icons.js) instead of the line drawings, 16×16, 32×32 on the desktop */
[data-design="win2k"] .ic { width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; image-rendering: pixelated; }
[data-design="win2k"] .ic svg { display: none; }
[data-design="win2k"] :is(.desk-icon, .pl-art) .ic { width: 32px; height: 32px; background-size: 32px 32px; }
[data-design="win2k"][data-theme="dark"] .ic-chevron { filter: invert(1); }

/* the desktop, its wallpaper and its icons */
[data-design="win2k"] main { position: relative; z-index: 0; overflow: hidden; padding: 0; background: var(--desk); } /* its own layer: windows, however high they stack, stay under the taskbar */
[data-design="win2k"] main::before { content: ''; position: absolute; inset: -48px; z-index: -1; background: var(--wall, none) center / cover; filter: var(--wall-filter); }
[data-design="win2k"] .desk-icons { position: absolute; inset: 8px auto 8px 6px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
[data-design="win2k"] .desk-icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 2px; border: 0;
  background: none; color: #fff; cursor: default; text-align: center;
}
[data-design="win2k"] .desk-icon span:last-child { padding: 0 2px; text-shadow: 1px 1px 0 #000; }
[data-design="win2k"] .desk-icon:focus .ic { filter: brightness(0.6) sepia(1) hue-rotate(185deg) saturate(4); }
[data-design="win2k"] .desk-icon:focus span:last-child { background: var(--sel); color: var(--sel-text); text-shadow: none; outline: 1px dotted #fff; }
[data-design="win2k"] .desk-icon:focus { outline: none; }

/* windows */
[data-design="win2k"] .win {
  position: absolute; display: flex; flex-direction: column; min-width: 280px; min-height: 160px; padding: 3px;
  background: var(--face); box-shadow: var(--raised); resize: both; overflow: hidden;
}
[data-design="win2k"] .win.max { inset: 0 !important; width: auto !important; height: auto !important; resize: none; }
[data-design="win2k"] .win-bar {
  display: flex; align-items: center; gap: 4px; min-height: 20px; padding: 1px 2px 1px 4px; user-select: none; touch-action: none;
  background: linear-gradient(90deg, var(--title-off1), var(--title-off2)); color: var(--title-off-text); font-weight: 700;
}
[data-design="win2k"] .win.active .win-bar { background: linear-gradient(90deg, var(--title1), var(--title2)); color: var(--title-text); }
[data-design="win2k"] .win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-design="win2k"] .win-btns { display: flex; gap: 2px; }
[data-design="win2k"] .win-btn { position: relative; width: 16px; height: 14px; padding: 0; border: 0; background: var(--face); box-shadow: var(--raised); color: var(--text); }
[data-design="win2k"] .win-btn:active { box-shadow: var(--sunken); }
[data-design="win2k"] .win-btn.close { margin-left: 2px; }
[data-design="win2k"] .win-btn.min::before { content: ''; position: absolute; left: 4px; bottom: 3px; width: 6px; height: 2px; background: currentColor; }
[data-design="win2k"] .win-btn.maxi::before { content: ''; position: absolute; left: 3px; top: 2px; width: 8px; height: 7px; border: 1px solid currentColor; border-top-width: 2px; }
[data-design="win2k"] .win-btn.close::before { content: '✕'; position: absolute; inset: 0; font: 700 10px/14px Tahoma, sans-serif; text-align: center; }
[data-design="win2k"] .win-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 16px; margin-top: 2px; background: var(--face); }

/* controls: raised buttons that sink when pressed, sunken white fields */
[data-design="win2k"] .btn {
  min-height: 23px; padding: 3px 12px; border: 0; background: var(--face); color: var(--text); box-shadow: var(--raised);
  font: 12px Tahoma, sans-serif; font-weight: 400; gap: 6px;
}
[data-design="win2k"] .btn:hover { border-color: transparent; }
[data-design="win2k"] .btn:active { transform: none; box-shadow: var(--sunken); padding: 4px 11px 2px 13px; }
[data-design="win2k"] .btn.primary { background: var(--face); color: var(--text); box-shadow: 0 0 0 1px var(--text), var(--raised); font-weight: 700; }
[data-design="win2k"] .btn.primary:hover { filter: none; }
[data-design="win2k"] .btn.danger { color: var(--danger); }
[data-design="win2k"] .btn:disabled { color: var(--b-sh); text-shadow: 1px 1px 0 var(--b-hi); opacity: 1; }
[data-design="win2k"] .btn:disabled .ic { filter: grayscale(1) opacity(0.5); }
[data-design="win2k"][data-theme="dark"] .btn:disabled { color: #767676; text-shadow: none; }
[data-design="win2k"] .btn.icon, [data-design="win2k"] .btn.icon.sm { width: 24px; height: 23px; padding: 0; }
[data-design="win2k"] .input, [data-design="win2k"] select.input {
  padding: 3px 4px; border: 0; background: var(--win); color: var(--text); box-shadow: var(--sunken); font: 12px Tahoma, sans-serif;
}
[data-design="win2k"] .input:focus { outline: none; }
[data-design="win2k"] .badge { background: none; border: 1px solid var(--line); color: var(--c, var(--text)); font-weight: 700; }
[data-design="win2k"] .avatar { box-shadow: var(--sunken); }

/* panels: the content sits on sunken white (dark: near-black) panels inside the grey window */
[data-design="win2k"] :is(.card, .tile, .pl, .hero) { position: relative; background: var(--win); border: 0; box-shadow: var(--sunken); }
[data-design="win2k"] .card { padding: 10px 12px 12px; margin-top: 10px; }
[data-design="win2k"] .card > h3:first-child { margin: 0 0 8px; font-size: 12px; font-weight: 700; justify-content: flex-start; }
[data-design="win2k"] .card > h3:first-child .t-sub { margin-left: 8px; font-weight: 400; }
[data-design="win2k"] .card :is(.list, .table) { box-shadow: none; padding: 0; }
[data-design="win2k"] .t-sub { color: var(--muted); font-size: 11px; }
[data-design="win2k"] .hint { background: var(--tip); color: var(--text); border: 1px solid var(--tip-border); box-shadow: none; }
[data-design="win2k"] .vote { position: relative; background: var(--tip); border: 1px solid var(--tip-border); box-shadow: none; }
[data-design="win2k"] .vote .progress { height: 14px; background: var(--win); box-shadow: var(--sunken); }
[data-design="win2k"] .vote .progress i, [data-design="win2k"] .progress i { background: repeating-linear-gradient(90deg, var(--title1) 0 8px, transparent 8px 10px); }
[data-design="win2k"][data-theme="dark"] .progress i { background: repeating-linear-gradient(90deg, var(--title2) 0 8px, transparent 8px 10px); }
[data-design="win2k"] .tile-value { font-size: 18px; font-weight: 700; }
[data-design="win2k"] .faq-item { background: var(--face); border: 2px groove var(--b-lt); box-shadow: none; }
[data-design="win2k"] .faq-item summary { padding: 8px 10px; }
[data-design="win2k"] .faq-item[open] { border-color: var(--b-lt); }
[data-design="win2k"] .faq-item p { padding: 8px 10px 10px; background: var(--win); color: var(--text); box-shadow: var(--sunken); margin: 0 8px 8px; }
[data-design="win2k"] :is(.thank a, .ext-link, .faq-item a) { color: var(--link); text-decoration: underline; }

/* list views: no frame of their own on a panel; the selection is navy */
[data-design="win2k"] .list, [data-design="win2k"] .table { background: var(--win); box-shadow: var(--sunken); padding: 2px; }
[data-design="win2k"] .row { padding: 3px 6px; gap: 8px; border-radius: 0; }
[data-design="win2k"] .row:hover { background: var(--sel); color: var(--sel-text); }
[data-design="win2k"] .row:hover .t-sub, [data-design="win2k"] .row:hover .time, [data-design="win2k"] .row:hover .n { color: var(--sel-text); }
[data-design="win2k"] .row.mine { background: var(--accent-soft); box-shadow: none; }
[data-design="win2k"] .thumb { width: 32px; height: 32px; box-shadow: var(--sunken); }
[data-design="win2k"] .row { grid-template-columns: auto 32px minmax(0, 1fr) auto auto; }
[data-design="win2k"] .tr { border-bottom: 1px solid var(--b-lt); padding: 4px 6px; }
[data-design="win2k"] .tr.th { background: var(--face); box-shadow: var(--raised); color: var(--text); font-weight: 400; }
[data-design="win2k"] .log-row { border-bottom: 1px solid var(--b-lt); padding: 4px; font-size: 12px; }

/* tabs (.seg) as a property sheet's tab strip */
[data-design="win2k"] .seg { gap: 0; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--b-hi); margin-bottom: 12px; }
[data-design="win2k"] .seg button { padding: 3px 10px; color: var(--text); background: var(--face); box-shadow: inset 1px 1px var(--b-hi), inset -1px 0 var(--b-dk), inset -2px 0 var(--b-sh); margin-top: 3px; font-weight: 400; }
[data-design="win2k"] .seg button.on { background: var(--face); color: var(--text); margin-top: 0; padding-bottom: 5px; margin-bottom: -1px; }

/* the air window */
[data-design="win2k"] .hero { grid-template-columns: minmax(110px, 170px) 1fr; padding: 12px; gap: 16px; }
[data-design="win2k"] .hero-bg { display: none; }
[data-design="win2k"] .hero .cover { box-shadow: var(--sunken); padding: 2px; background: var(--face); }
[data-design="win2k"] .eyebrow { color: var(--eyebrow); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 700; }
[data-design="win2k"] .hero h2 { font-size: 20px; margin: 6px 0 4px; }
[data-design="win2k"] .hero .sub { font-size: 12px; color: var(--muted); }
[data-design="win2k"] .hero-time { font-size: 12px; }
[data-design="win2k"] .actions { gap: 6px; margin-top: 12px; }
[data-design="win2k"] .quick-row { background: var(--win); border: 0; box-shadow: var(--sunken); padding: 3px 3px 3px 8px; }
[data-design="win2k"] .quick-row:focus-within { box-shadow: var(--sunken); border: 0; }
[data-design="win2k"] .quick-row .input { box-shadow: none; padding: 4px; font-size: 12px; }
[data-design="win2k"] .ch { border: 1px solid var(--b-sh); background: var(--win); }
[data-design="win2k"] .ch.has-bot { background: var(--accent-soft); border-color: var(--accent); }
[data-design="win2k"] .person { background: var(--face); box-shadow: var(--raised); }
[data-design="win2k"] .pl:hover { transform: none; }
[data-design="win2k"] .pl-art { background: var(--title1); color: #fff; box-shadow: var(--sunken); }
[data-design="win2k"] .chip { background: var(--face); box-shadow: var(--raised); }
[data-design="win2k"] .radio-down { color: var(--danger); }

/* context menus and dropdowns; tooltips for toasts */
[data-design="win2k"] .menu { background: var(--face); border: 0; box-shadow: var(--raised), 2px 2px 0 rgb(0 0 0 / 0.4); padding: 3px; }
[data-design="win2k"] .menu-item { padding: 4px 18px 4px 8px; border-radius: 0; }
[data-design="win2k"] .menu-item:hover, [data-design="win2k"] .menu-item:focus-visible { background: var(--sel); color: var(--sel-text); }
[data-design="win2k"] .menu-item:hover .t-sub, [data-design="win2k"] .menu-item:hover .time { color: var(--sel-text); }
[data-design="win2k"] .menu-title { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); }
[data-design="win2k"] .toast { background: var(--tip); color: var(--text); border: 1px solid var(--tip-border); box-shadow: 2px 2px 0 rgb(0 0 0 / 0.35); font-weight: 400; }
[data-design="win2k"] #toasts { bottom: 40px; }

/* settings bits */
[data-design="win2k"] .design-card { background: var(--face); border: 0; box-shadow: var(--raised); }
[data-design="win2k"] .design-card.on { box-shadow: var(--sunken); outline: 1px dotted var(--text); outline-offset: -5px; }
[data-design="win2k"] .design-card:hover { transform: none; }
[data-design="win2k"] .release li::marker { color: var(--text); }

/* the taskbar: Start, the windows, the tray (the player, the volume, the clock, the theme) */
[data-design="win2k"] .bar {
  display: flex; align-items: center; gap: 3px; min-height: 30px; padding: 2px; background: var(--face);
  box-shadow: inset 0 1px var(--b-lt), inset 0 2px var(--b-hi); border: 0; position: relative; z-index: 60;
}
[data-design="win2k"] .start-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 3px; border: 0; background: var(--face);
  box-shadow: var(--raised); font: 700 12px Tahoma, sans-serif; color: var(--text); cursor: default;
}
[data-design="win2k"] .start-btn img { width: 18px; height: 18px; }
[data-design="win2k"] .start-btn:active, [data-design="win2k"] .start-btn[aria-expanded="true"] { box-shadow: var(--sunken); }
[data-design="win2k"] .tasks { display: flex; flex: 1; gap: 3px; min-width: 0; overflow: hidden; padding-left: 4px; border-left: 1px solid var(--b-sh); box-shadow: 1px 0 var(--b-hi) inset; }
[data-design="win2k"] .task {
  display: inline-flex; align-items: center; gap: 4px; width: 160px; min-width: 0; height: 24px; padding: 0 6px; border: 0;
  background: var(--face); box-shadow: var(--raised); color: var(--text); font: 12px Tahoma, sans-serif; text-align: left; cursor: default;
}
[data-design="win2k"] .task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-design="win2k"] .task.on { box-shadow: var(--sunken); font-weight: 700; background: repeating-conic-gradient(var(--face) 0 25%, var(--b-hi) 0 50%) 0 0 / 2px 2px; }
[data-design="win2k"] .np { order: 5; gap: 6px; max-width: 240px; padding: 0 6px; height: 24px; box-shadow: inset 1px 1px var(--b-sh), inset -1px -1px var(--b-hi); }
[data-design="win2k"] .np .thumb { width: 18px; height: 18px; box-shadow: none; padding: 0; }
[data-design="win2k"] .np .t-sub { display: none; }
[data-design="win2k"] .np .t-title { font-weight: 400; font-size: 11px; }
[data-design="win2k"] .center { order: 6; flex-direction: row; gap: 4px; height: 24px; padding: 0 4px; box-shadow: inset 1px 1px var(--b-sh), inset -1px -1px var(--b-hi); }
[data-design="win2k"] .listen { width: 20px; height: 20px; background: var(--face); color: var(--text); box-shadow: var(--raised); }
[data-design="win2k"] .listen:active { transform: none; box-shadow: var(--sunken); }
[data-design="win2k"] .center .time { font-size: 11px; font-weight: 400; color: var(--text); letter-spacing: 0; }
[data-design="win2k"] .right { order: 7; height: 24px; padding: 0 6px; gap: 4px; color: var(--text); box-shadow: inset 1px 1px var(--b-sh), inset -1px -1px var(--b-hi); }
[data-design="win2k"] .right .t-sub { font-size: 11px; color: var(--text); }
[data-design="win2k"] .right input { width: 80px; accent-color: var(--title1); }
[data-design="win2k"] .clock { order: 8; display: grid; place-items: center; height: 24px; padding: 0 10px; font-size: 11px; box-shadow: inset 1px 1px var(--b-sh), inset -1px -1px var(--b-hi); }
[data-design="win2k"] .tray-theme { order: 9; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: var(--face); box-shadow: var(--raised); cursor: default; }
[data-design="win2k"] .tray-theme:active { box-shadow: var(--sunken); }

/* the Start menu: the banner down the side, the sections, the theme, the account */
[data-design="win2k"] .start-menu {
  position: fixed; left: 2px; bottom: 32px; z-index: 70; display: flex; min-width: 220px; padding: 3px;
  background: var(--face); box-shadow: var(--raised), 2px 2px 0 rgb(0 0 0 / 0.4);
}
[data-design="win2k"] .start-banner { display: flex; align-items: flex-end; width: 24px; background: linear-gradient(0deg, var(--title1), #000); }
[data-design="win2k"] .start-banner span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; color: #d4d0c8; font: 400 17px Tahoma, sans-serif; white-space: nowrap; }
[data-design="win2k"] .start-banner b { color: #fff; font-weight: 700; }
[data-design="win2k"] .start-items { display: flex; flex-direction: column; flex: 1; }
[data-design="win2k"] .start-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 22px 6px 8px; border: 0; background: none; color: var(--text);
  font: 12px Tahoma, sans-serif; text-align: left; text-decoration: none; cursor: default;
}
[data-design="win2k"] .start-item:hover, [data-design="win2k"] .start-item:focus-visible { background: var(--sel); color: var(--sel-text); outline: none; }
[data-design="win2k"] .start-menu hr { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid var(--b-sh); border-bottom: 1px solid var(--b-hi); }

/* the classic scrollbars */
[data-design="win2k"] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-design="win2k"] ::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--face) 0 25%, var(--b-hi) 0 50%) 0 0 / 2px 2px; }
[data-design="win2k"] ::-webkit-scrollbar-thumb, [data-design="win2k"] ::-webkit-scrollbar-button:single-button { background: var(--face); box-shadow: var(--raised); }
[data-design="win2k"] ::-webkit-scrollbar-button:single-button { display: block; height: 16px; width: 16px; }
[data-design="win2k"] ::-webkit-scrollbar-corner { background: var(--face); }

/* a phone: one window at a time, filling the screen; the taskbar stays */
@media (max-width: 860px) {
  [data-design="win2k"] .win { inset: 0 !important; width: auto !important; height: auto !important; resize: none; }
  [data-design="win2k"] .win:not(.active) { display: none; }
  [data-design="win2k"] .win-btn.maxi { display: none; }
  [data-design="win2k"] .desk-icons { inset: 8px 8px auto 8px; flex-direction: row; }
  [data-design="win2k"] .task { width: auto; max-width: 110px; }
  [data-design="win2k"] .np, [data-design="win2k"] .right, [data-design="win2k"] .clock { display: none; }
  [data-design="win2k"] .hero { grid-template-columns: 100%; }
  [data-design="win2k"] .bar { padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
}