/* The page and the desktop the windows float on (docs/ARCHITECTURE.md §3).
   #desktop is scaled with CSS zoom by kit.setScale(); every bitmap and canvas
   is drawn nearest-neighbour so 2x looks like a 2002 screen blown up, not a
   modern high-DPI render.

   :root holds the chrome's palette (phase 3, owner note 2; docs/client/shell.md
   "The chrome"): every colour the window chrome and the dialogs use comes from
   here, so the look is changed in one place. Teal from the house #008080 for
   frames, title bars, selections and focus; cool "chrome" steel greys for
   bodies, buttons and fields. The Worlds-layout interior of the main window
   (client.css) keeps its own teal plates. */

:root {
  /* the house teal */
  --np-teal: #008080;
  --np-teal-ink: #0A5856;        /* teal text and rules on steel: legends, default-button edge */
  --np-focus: #1C9C98;           /* focus rings */

  /* window frame and title bar (active) */
  --np-frame: #0B7A78;
  --np-frame-edge: #022E2E;      /* the 1 px outline round every window */
  --np-frame-hi: #52BEB9;
  --np-frame-lo: #045250;
  --np-title-hi: #2AA7A2;        /* the title bar runs --np-title-hi -> --np-teal -> --np-title-lo */
  --np-title-lo: #005E5E;
  --np-title-line: #86DCD7;      /* the highlight line along its top */
  --np-title-shadow: #013838;    /* caption text shadow */

  /* inactive windows: the same frame, desaturated to a grey-teal */
  --np-off-frame: #7F9594;
  --np-off-edge: #3D4E4D;
  --np-off-hi: #B3C4C3;
  --np-off-lo: #5E7372;
  --np-off-title-hi: #A7B9B8;
  --np-off-title: #8BA09F;
  --np-off-title-lo: #6C8180;
  --np-off-line: #C8D6D5;
  --np-off-text: #EEF3F2;
  --np-off-shadow: #566A69;

  /* steel, light to dark: 0 bevel light, 1-3 faces, 4 bevel shadow and etched lines,
     5 field shadow, 6 outlines */
  --np-steel-0: #F8FAFB;
  --np-steel-1: #E6EAEC;
  --np-steel-2: #D5DADD;
  --np-steel-3: #C1C8CC;
  --np-steel-4: #98A1A6;
  --np-steel-5: #6B757A;
  --np-steel-6: #353F43;
  --np-face-top: #E8ECEE;        /* window bodies: a light vertical gradient top -> bottom */
  --np-face: #D8DDE0;
  --np-face-bot: #C9CFD2;
  --np-menu: #F3F5F6;
  --np-well: #F2F4F5;            /* inside a progress bar, a read-only field */

  /* selection and hover */
  --np-select: #0E7472;
  --np-select-hi: #2E9794;
  --np-select-text: #FFFFFF;
  --np-select-dots: #9FE6E2;
  --np-select-off: #C6CED1;      /* a list's selection while the list is not focused */
  --np-hover-ring: #A9DCD9;
  --np-hover-field: #E6F4F3;

  /* text */
  --np-field: #FFFFFF;
  --np-field-ro: #F2F4F5;
  --np-text: #000000;
  --np-text-dim: #50595D;
  --np-text-dim2: #343C40;
  --np-text-off: #8F989C;
  --np-link: #0000EE;
  --np-link-visited: #551A8B;

  /* type: Verdana, a size down from Tahoma's 11 px (the same width, its own letters) */
  --np-font: 10px Verdana, Tahoma, "Segoe UI", sans-serif;
  --np-font-caption: bold 11px Verdana, Tahoma, sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #001414;
}

#desktop {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #001414 url("../assets/ui/desktop.png");
  font: var(--np-font);
  color: var(--np-text);
  -webkit-text-size-adjust: none;
  cursor: default;
}

#desktop img, #desktop canvas { image-rendering: pixelated; }
#desktop input, #desktop button, #desktop textarea, #desktop select { font-family: inherit; }
#desktop ::selection { background: var(--np-select); color: var(--np-select-text); }

/* Desktop shortcut icons (shown when the program is not running). */
.desk-icon {
  position: absolute;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  color: #fff;
  cursor: default;
}
.desk-icon img { width: 32px; height: 32px; }
.desk-icon span {
  padding: 0 2px 1px;
  line-height: 13px;
  text-shadow: 1px 1px #000;
}
.desk-icon.sel img { filter: brightness(0.62) sepia(1) hue-rotate(135deg) saturate(2.4); }
.desk-icon.sel span { background: var(--np-select); text-shadow: none; }
.desk-icon { outline: none; }
.desk-icon:focus span { outline: 1px dotted var(--np-select-dots); }   /* the focus rectangle on the label */

/* The "nothing loaded" state before main.js runs, and <noscript>. */
.boot-note {
  position: absolute; left: 12px; top: 10px;
  color: #6FA6AA; font: var(--np-font);
}

/* The busy cursor while the program waits on the server. */
.busy, .busy * { cursor: progress !important; }