/* Windows XP, Luna blue.

   The parts that carry the recognition are the taskbar gradient, the green
   start button with its rounded right edge, the title bar with its lighter
   band along the top, and the blue task pane down the left of an Explorer
   window. Everything here is drawn in CSS: no screenshots, no image files, and
   nothing that has to be kept in sync with an asset folder.

   The desktop is a gradient rather than the photograph, deliberately. The
   photograph is somebody's copyrighted work, and a gradient of the same two
   colors reads as the same desktop to anybody who ever used one. */

:root {
  --xp-blue:    #0058e6;
  --xp-blue-lt: #3f8cf3;
  --xp-navy:    #003399;
  --xp-pane:    #6d8ddb;
  --xp-face:    #ece9d8;   /* the beige every dialog was made of */
  --xp-green:   #3c9b26;
  --xp-orange:  #E87722;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(#2a6bb5 0%, #62a7e8 42%, #8fc4ef 55%, #6ea23a 56%, #4f8a2b 72%, #3f7a24 100%);
  color: #000;
  font: 13px/1.55 Tahoma, "Segoe UI", Verdana, sans-serif;
  padding: 0 0 52px;   /* the taskbar sits in this space */
}

.xp { max-width: 1080px; margin: 0 auto; padding: 22px 16px 0; }

a { color: var(--xp-navy); }

/* ── Desktop icons ─────────────────────────────────────────────────────── */

/* Top left corner of the screen, in a column, which is where a desktop put
   them. Taken out of the flow so the window below is not pushed down by them,
   and returned to the flow on a narrow screen where a floating column of icons
   would sit on top of the content. */
.xp-icons {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 14px; left: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.xp-icons a {
  display: block; width: 96px; padding: 6px 4px;
  text-align: center; text-decoration: none;
  color: #fff; font-size: 11px; line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.xp-icons a:hover, .xp-icons a:focus { background: rgba(0, 60, 160, .45); outline: 1px dotted rgba(255, 255, 255, .8); }
.xp-ico {
  display: block; width: 34px; height: 34px; margin: 0 auto 5px;
  border: 1px solid rgba(0, 0, 0, .45);
  border-radius: 3px;
  background: linear-gradient(#e9eef7, #9fb4d6);
  box-shadow: inset 0 1px 0 #fff;
}
.xp-ico-0 { background: linear-gradient(#dfe7f4, #7f93b5); }
.xp-ico-1 { background: linear-gradient(#ffe9a8, #e0b545); }   /* the folder */
.xp-ico-2 { background: linear-gradient(#dbe8f7, #8fa9c9); border-radius: 3px 3px 10px 10px; }
.xp-ico-3 { background: linear-gradient(#cfe9cf, #6f9e6f); }

/* ── The window ────────────────────────────────────────────────────────── */

.xp-win {
  background: var(--xp-face);
  border: 3px solid var(--xp-blue);
  border-top: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
  margin-bottom: 26px;
}

.xp-title {
  background: linear-gradient(180deg, #0e6ff0 0%, #0058e6 8%, #1f74ee 40%, #0a5ad6 88%, #2a7ff2 100%);
  border-radius: 6px 6px 0 0;
  padding: 4px 6px 4px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Used on a span in the window's title bar and on an h2 in the dialog's, so it
   has to override a heading's own margins and size. */
.xp-title-text {
  color: #fff; font: 700 13px/1.5 Tahoma, "Segoe UI", sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
  margin: 0;
}
.xp-btns { display: flex; gap: 3px; }
.xp-btns > span {
  width: 21px; height: 20px; border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 3px; display: block;
  background: linear-gradient(#5aa2f7, #1f6fe0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.xp-close { background: linear-gradient(#f08a6a, #d2401a) !important; }

.xp-menu { background: var(--xp-face); border-bottom: 1px solid #aca899; }
.xp-menu ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 2px 6px; }
.xp-menu li { padding: 3px 9px; font-size: 12px; }

.xp-body { display: flex; align-items: stretch; }
/* The pane is written after the content (see the partial) and put back on the
   left here, which is the one job CSS order is actually for. */
.xp-pane    { order: 1; }
.xp-content { order: 2; }

/* The Explorer task pane. Blue, rounded panels, headers in a paler gradient. */
.xp-pane {
  width: 224px; flex: 0 0 224px;
  background: linear-gradient(#7ba4df, var(--xp-pane));
  padding: 12px 10px;
}
.xp-panel { background: #d6dff7; border-radius: 5px; overflow: hidden; margin-bottom: 12px; }
.xp-panel h2 {
  margin: 0; padding: 5px 9px;
  background: linear-gradient(#f8fafd, #cddaf0);
  color: #215dc6; font: 700 12px/1.4 Tahoma, sans-serif;
}
.xp-panel ul { list-style: none; margin: 0; padding: 8px 9px; }
.xp-panel li { margin-bottom: 6px; font-size: 12px; line-height: 1.4; }
.xp-panel a { color: #215dc6; text-decoration: none; }
.xp-panel a:hover, .xp-panel a:focus { text-decoration: underline; color: var(--xp-orange); }

.xp-content { flex: 1 1 auto; min-width: 0; background: #fff; padding: 20px 26px 26px; }
.xp-content h1 { font: 700 26px/1.25 "Trebuchet MS", Tahoma, sans-serif; color: var(--xp-navy); margin: 0 0 10px; }
.xp-content h2 { font: 700 16px/1.3 "Trebuchet MS", Tahoma, sans-serif; color: var(--xp-navy); margin: 26px 0 8px; }
.xp-content h3 { font: 700 13px/1.3 Tahoma, sans-serif; margin: 16px 0 4px; }
.xp-lead { font-size: 14px; color: #333; margin: 0 0 6px; }
.xp-list { margin: 8px 0 0; padding: 0 0 0 22px; }
.xp-list li { margin-bottom: 8px; }
.xp-dl { margin: 8px 0 0; }
.xp-dl dt { font-weight: 700; margin-top: 12px; }
.xp-dl dd { margin: 2px 0 0; color: #333; }

@media (max-width: 760px) {
  .xp-body { display: block; }
  .xp-pane { width: auto; }
  .xp-content { padding: 16px; }
}

/* ── The tab strip, built without JavaScript ───────────────────────────── */

/* The radios sit in the flow but out of sight, the labels are ordered ahead of
   every panel, and :checked picks the one panel that shows. Keyboard order is
   the natural one, and a browser with no script has a working tab strip. */
.xp-tabs {
  display: flex; flex-wrap: wrap;
  margin-top: 10px;
  position: relative;
}
.xp-tab-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xp-tab {
  order: 1;
  padding: 5px 14px; margin: 0 2px -1px 0;
  background: linear-gradient(#fdfdfb, #e2dfd2);
  border: 1px solid #aca899; border-bottom: 0;
  border-radius: 4px 4px 0 0;
  font-size: 12px; cursor: pointer; position: relative; z-index: 1;
}
.xp-tabpanel {
  order: 2; width: 100%; display: none;
  border: 1px solid #aca899; background: var(--xp-face);
  padding: 14px 16px;
}
.xp-tabpanel p { margin: 0; }
.xp-tab-radio:checked + .xp-tab { background: var(--xp-face); padding-bottom: 7px; z-index: 2; }
.xp-tab-radio:checked + .xp-tab + .xp-tabpanel { display: block; }
.xp-tab-radio:focus-visible + .xp-tab { outline: 2px solid var(--xp-orange); outline-offset: 1px; }

/* ── The dialog, which is the form ─────────────────────────────────────── */

.xp-dialog { max-width: 520px; margin-left: auto; margin-right: auto; }
.xp-dialog-body { padding: 18px 20px 20px; }
.xp-note { font-size: 12px; color: #444; margin: 0 0 14px; }

.xp-field { margin: 0 0 12px; }
.xp-field label { display: block; font-size: 12px; margin-bottom: 3px; }
.xp-field input, .xp-field textarea {
  width: 100%; padding: 4px 5px;
  font: 12px/1.5 Tahoma, sans-serif;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .18);   /* the sunken field */
}
.xp-field input:focus, .xp-field textarea:focus { outline: 2px solid var(--xp-orange); outline-offset: 1px; }
.xp-field.is-bad input, .xp-field.is-bad textarea { border-color: #b00020; background: #fff7f7; }

.rt-field-err { color: #b00020; font-size: 11px; font-weight: 700; margin: 4px 0 0; }
.rt-err { background: #fff7f7; border: 1px solid #b00020; color: #6b0014; padding: 9px 11px; font-size: 12px; margin: 0 0 14px; }

.xp-actions { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.xp-ok {
  min-width: 132px; padding: 6px 16px;
  font: 700 12px/1.4 Tahoma, sans-serif; cursor: pointer;
  background: linear-gradient(#fdfdfb, #dcd8c8);
  border: 1px solid #7f7a68; border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff;
}
.xp-ok:hover, .xp-ok:focus { background: var(--xp-orange); color: #fff; border-color: #a3520f; }
.xp-cancel { font-size: 12px; }

/* ── The balloon and the taskbar ───────────────────────────────────────── */

.xp-balloon-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xp-balloon-toggle:checked + .xp-balloon { display: none; }
.xp-balloon-toggle:focus-visible + .xp-balloon { outline: 2px solid var(--xp-orange); outline-offset: 2px; }

.xp-balloon {
  position: fixed; right: 16px; bottom: 54px; z-index: 60;
  max-width: 330px;
  background: #ffffe1; border: 1px solid #000; border-radius: 3px;
  padding: 10px 12px; font-size: 12px;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, .35);
}
.xp-balloon p { margin: 0; }
.xp-balloon-head { font-weight: 700; margin-bottom: 4px !important; }
.xp-balloon::after {          /* the tail, pointing down at the tray */
  content: ""; position: absolute; right: 34px; bottom: -13px;
  border: 7px solid transparent; border-top-color: #000;
}
.xp-balloon-x {
  position: absolute; top: 4px; right: 6px;
  cursor: pointer; font: 700 15px/1 Tahoma, sans-serif; color: #444;
  padding: 2px 4px;
}
.xp-balloon-x:hover { color: #000; }
.xp-vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.xp-taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 40px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(#3f8cf3 0%, #245edb 9%, #1941a5 20%, #1c51c4 90%, #2a6ae0 100%);
  border-top: 1px solid #56a0f5;
  z-index: 50;
}
.xp-start {
  display: flex; align-items: center; gap: 7px;
  height: 100%; padding: 0 22px 0 12px;
  background: linear-gradient(#5eb63e 0%, var(--xp-green) 42%, #2e7d1c 100%);
  border-radius: 0 12px 12px 0;
  color: #fff !important; text-decoration: none;
  font: italic 700 16px/1 Tahoma, "Trebuchet MS", sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .55);
}
.xp-start:hover, .xp-start:focus { background: linear-gradient(#6fc94d, #3e9b2a 42%, #38911f 100%); }
.xp-flag {
  width: 17px; height: 17px; border-radius: 3px;
  background:
    linear-gradient(#ef4136 50%, #7ac143 50%) left / 50% 100% no-repeat,
    linear-gradient(#f7941e 50%, #29abe2 50%) right / 50% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.xp-task {
  color: #fff; font-size: 12px; padding: 5px 14px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 3px;
}
.xp-tray {
  margin-left: auto; height: 100%; display: flex; align-items: center;
  padding: 0 16px; color: #fff; font-size: 12px;
  background: linear-gradient(#18bbf5 0%, #0c8ce0 12%, #0a76c8 88%, #1697e8 100%);
  border-left: 1px solid #16a1e8;
}

/* The icon column only has room to float once the viewport is wider than the
   window plus a column of icons either side of it. Below that it goes back into
   the flow and lies down across the top, rather than sitting on the window. */
@media (max-width: 1300px) {
  .xp-icons { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 18px; }
}

@media (max-width: 520px) {
  .xp-balloon { left: 12px; right: 12px; max-width: none; }
  .xp-task { display: none; }
}