/* ============================================================
   chrome.css  ::  font, cursors, scrollbars
   ------------------------------------------------------------
   The operating system furniture. Loaded on every page, before
   style.css does its layout work, so these can be overridden.

   1. Selawik, the Windows 7 interface font
   2. cursors, which now live in the generated css/cursors.css
   3. Windows Vista style scrollbars
   ============================================================ */


/* ---------- 1. THE FONT --------------------------------------
   Selawik is Microsoft's open source, metric compatible
   substitute for Segoe UI. Segoe UI is the real Vista and
   Windows 7 interface font and is licensed to Microsoft, so it
   cannot go on a website. Selawik can, and it measures the same.

   Built from the UFO sources in fonts/Selawik-1.01 because the
   download had no compiled font in it. See fonts/README.txt.

   WOFF first because it is roughly half the bytes; TTF after it
   for anything that cannot read WOFF. Safari 5.1 and up take
   WOFF, so both old MacBooks are fine.
   ----------------------------------------------------------- */
@font-face {
  font-family: "Selawik";
  src: url("../fonts/selawik-regular.woff") format("woff"),
       url("../fonts/selawik-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Selawik";
  src: url("../fonts/selawik-bold.woff") format("woff"),
       url("../fonts/selawik-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Selawik Light";
  src: url("../fonts/selawik-light.woff") format("woff"),
       url("../fonts/selawik-light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Everything uses it. The universal selector is heavy handed and
   normally worth avoiding, but the point here is that nothing
   escapes.

   Form controls are the real reason this exists: input, select,
   textarea and button do NOT inherit font-family from body. They
   fall back to the operating system UI font unless told
   otherwise, which is why the search boxes and dropdowns used to
   look wrong next to everything else.

   The one deliberate exception is monospace, further down.

   IMPORTANT: this universal rule is a safety net, not the main
   mechanism. It has specificity 0, so any real selector beats
   it: `body { font: ... }` in style.css wins no matter which
   file loads last, because specificity outranks order. So
   Selawik is also named first in every font stack in style.css
   and player.css. This rule only catches what those stacks
   miss, which in practice is form controls. */
*,
*:before,
*:after {
  font-family: "Selawik", "Segoe UI", "Lucida Grande", Tahoma, Verdana, sans-serif;
}

/* Monospace stays monospace. The hit counter, the clock and the
   copy and paste snippets are all meant to look like terminal
   output, and Selawik would ruin them. */
code, pre, kbd, samp, tt,
.snippet, .counter, .clock,
.wmp__times, .wallpanel__name {
  font-family: "Lucida Console", Consolas, Monaco, monospace !important;
}


/* ---------- 2. CURSORS ---------------------------------------
   Moved out to css/cursors.css, which is GENERATED by
   tools/cursors.py from the real Windows 7 / Vista cursor pack.

   The hotspots in that file are read out of the original .cur
   headers rather than guessed, so the file has to be generated
   rather than hand written. Editing it directly will be undone
   the next time the script runs; change the RULES list at the
   top of tools/cursors.py instead.
   ----------------------------------------------------------- */


/* ---------- 3. SCROLLBARS ------------------------------------
   The Vista scrollbar: a pale sunken track, a glossy rounded
   thumb with a light top edge, and square buttons at each end
   carrying a small triangle.

   These rules are WebKit only. That is not a compromise here,
   it is the whole target: both MacBooks run Safari, which is
   WebKit. Firefox ignores all of it and shows its own
   scrollbar, which is fine and still works.

   ::-webkit-scrollbar-button is the part most people skip, and
   it is exactly the part that makes it read as Vista rather
   than as a generic dark theme. Vista had arrows at both ends.
   ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 17px;      /* the real Vista width */
  height: 17px;
}

/* the track */
::-webkit-scrollbar-track {
  background-image: -webkit-linear-gradient(left, #eef3f7, #f7fafc 30%, #f2f6f9);
  background-image: linear-gradient(to right, #eef3f7, #f7fafc 30%, #f2f6f9);
  border-left: 1px solid #c8d4dd;
}
::-webkit-scrollbar-track:horizontal {
  background-image: -webkit-linear-gradient(top, #eef3f7, #f7fafc 30%, #f2f6f9);
  background-image: linear-gradient(to bottom, #eef3f7, #f7fafc 30%, #f2f6f9);
  border-left: 0;
  border-top: 1px solid #c8d4dd;
}

/* the thumb: glossy, rounded, with a bright top edge */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 3px;
          border-radius: 3px;
  border: 1px solid #9db4c6;
  background-image:
    -webkit-linear-gradient(left, rgba(255,255,255,.95), rgba(255,255,255,.25) 45%, rgba(255,255,255,.55));
  background-image:
    linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,.25) 45%, rgba(255,255,255,.55));
  background-color: #cfe0ec;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
::-webkit-scrollbar-thumb:hover {
  background-color: #b9d6ea;
  border-color: #7fa5c0;
}
::-webkit-scrollbar-thumb:active {
  background-color: #8fc0e0;
  border-color: #5d8fb5;
}
::-webkit-scrollbar-thumb:vertical { min-height: 28px; }
::-webkit-scrollbar-thumb:horizontal { min-width: 28px; }

/* the arrow buttons at each end */
::-webkit-scrollbar-button {
  display: block;
  height: 17px;
  width: 17px;
  border: 1px solid #c8d4dd;
  background-color: #f2f6f9;
  background-image: -webkit-linear-gradient(top, #ffffff, #e6eef4);
  background-image: linear-gradient(to bottom, #ffffff, #e6eef4);
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-button:hover { background-color: #dcebf6; }
::-webkit-scrollbar-button:active { background-color: #b9d6ea; }

/* Only show the two real end buttons. Without these four rules
   WebKit draws a second pair in the middle of the bar, which
   Vista never did. */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

/* the little triangles, as inline SVG data URIs so there are no
   extra files and no extra requests */
::-webkit-scrollbar-button:vertical:decrement {
  background-image:
    -webkit-linear-gradient(top, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 0L9 6H0z' fill='%234a5a68'/%3E%3C/svg%3E");
  background-image:
    linear-gradient(to bottom, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 0L9 6H0z' fill='%234a5a68'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:increment {
  background-image:
    -webkit-linear-gradient(top, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 6L0 0h9z' fill='%234a5a68'/%3E%3C/svg%3E");
  background-image:
    linear-gradient(to bottom, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 6L0 0h9z' fill='%234a5a68'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image:
    -webkit-linear-gradient(top, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9'%3E%3Cpath d='M0 4.5L6 0v9z' fill='%234a5a68'/%3E%3C/svg%3E");
  background-image:
    linear-gradient(to bottom, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9'%3E%3Cpath d='M0 4.5L6 0v9z' fill='%234a5a68'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image:
    -webkit-linear-gradient(top, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9'%3E%3Cpath d='M6 4.5L0 9V0z' fill='%234a5a68'/%3E%3C/svg%3E");
  background-image:
    linear-gradient(to bottom, #ffffff, #e6eef4),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9'%3E%3Cpath d='M6 4.5L0 9V0z' fill='%234a5a68'/%3E%3C/svg%3E");
}

/* where the two bars meet */
::-webkit-scrollbar-corner { background: #f2f6f9; }

/* scrollbars inside the dark media player follow it, not the page */
.wmp ::-webkit-scrollbar-track,
.wmp::-webkit-scrollbar-track {
  background: #10161b;
  border-left: 1px solid #000;
}
.wmp ::-webkit-scrollbar-thumb,
.wmp::-webkit-scrollbar-thumb {
  background-color: #4a5b68;
  border-color: #202b33;
}


/* ================= KEYBOARD FOCUS ==============================
   There was not one :focus rule in the entire stylesheet tree.
   Nothing had been actively stripped, so this is not a regression
   being repaired: it simply never got written, and the result was
   that tabbing through the site moved an invisible cursor.

   TWO OUTLINE:NONE RULES STAY ELSEWHERE IN THE TREE, and both are
   correct. The off screen input in css/tty.css exists only to
   catch keystrokes for a caret drawn on a canvas of text, and the
   full bleed Notepad textarea in css/desktop.css fills its window
   edge to edge. Ringing either of those would draw a box around
   something the visitor cannot see.

   There was a third, in css/shell.css, and it went the way that
   file did: css/shell.css styled the Command Prompt console, both
   were removed, and the css directory has no shell.css in it now.
   So the count in the css directory is three in total, and the
   third is the one at the foot of THIS file, which restates the
   two exceptions above so that nothing here can undo them.

   A DOTTED RING, not a glow. Windows drew keyboard focus as a one
   pixel dotted rectangle from 3.1 all the way through 7, so on
   this site it is both the accessible answer and the period one.
   outline rather than border, because an outline is drawn outside
   the box and moves nothing.

   -webkit-focus-ring-color would be the system default, which on
   a Mac is the blue halo and belongs to a different decade. */
/* ---------- the skip link --------------------------------------
   Off screen until it is focused, then it drops into the top left
   as an ordinary Aero button. Nobody using a mouse ever sees it.

   POSITIONED OFF SCREEN, NOT display:none AND NOT visibility:
   hidden. Both of those remove an element from the tab order
   entirely, which would make a skip link that can never be
   reached, and that mistake is common enough to be worth writing
   down. Negative top with a real size keeps it focusable.

   clip is the belt to that braces: an old engine that ignores the
   negative offset still will not paint it. It is deprecated in
   favour of clip-path, which is Safari 9.1, so the deprecated one
   is the correct choice here. */
.skip {
  /* FIXED, NOT ABSOLUTE. Absolute positions this against the page,
     so a skip link reached while the page is scrolled down would
     appear at the top of the DOCUMENT, which is off screen. It is
     the first tab stop, so in the ordinary case you reach it at
     the top and never notice; Shift+Tab from halfway down a long
     page is the case that would have been broken.

     ABOVE THE MONITOR, at 10000. css/crt.css draws the scanline
     overlay at 9999, over everything on the page, which is right
     for the whole site and wrong for this: a control that exists
     to make the page usable should not be the one thing showing
     through a filter. Everything else stays under it. */
  position: fixed;
  top: -60px;
  left: 8px;
  z-index: 10000;

  padding: 6px 14px;
  font-size: 12px;
  font-weight: bold;
  color: #10344c;
  text-decoration: none;

  background: #d8ecf8;
  border: 1px solid #7ba6c4;
  border-radius: 0 0 4px 4px;

  clip: rect(0 0 0 0);
}

.skip:focus {
  top: 0;
  clip: auto;
  text-decoration: none;
  outline: 1px dotted #10344c;
  outline-offset: -4px;
}


a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 1px dotted #000000;
  outline-offset: 1px;
}

/* On the dark chrome, the same ring in the opposite ink.

   THIS LIST WAS WRITTEN FOR THE AERO SIDE AND NEVER GREW. The four
   selectors below it covered the glass panels, the sidebar, the
   boot screen and the operating system menu, which was everything
   dark that existed at the time. Since then the site gained a
   Windows 98 desktop on a teal ground, a taskbar, and a blue crash
   screen, and all of those fell back to the black ring from the
   rule above.

   The crash screen is the worst of them: #0000aa with four links
   out of it, and a black dotted ring on that is very close to
   invisible, on the one screen whose entire purpose is showing you
   the way out. */
.glass a:focus,
.navlist a:focus,
.boot a:focus,
.osmenu a:focus,

/* the blue screen, and the links that leave it */
.bsod a:focus,

/* Pages 98: icons on the teal desktop, Start, the taskbar buttons,
   the Start menu rows and the title bar controls */
.dt__icon:focus,
.dt__start:focus,
.dt__task:focus,
.dt__menu a:focus,
.w98__bar a:focus {
  outline: 1px dotted #ffffff;
  outline-offset: 1px;
}

/* A focused window frame, which is now focusable so that opening a
   dialog puts the keyboard inside it. The frame is grey furniture
   rather than a control, so it takes the dark ring, drawn just
   inside the border where it is actually visible against the
   bevel. */
.w98:focus {
  outline: 1px dotted #000000;
  outline-offset: -3px;
}

/* The two deliberate exceptions, restated here so that the rules
   above cannot quietly undo them: .tty__input is an input and
   .w98pad is a textarea, so both are caught by the generic rule.

   A third selector, .shell__input, used to sit in this list. It
   belonged to the Command Prompt console that css/shell.css
   styled, and both went when that console did. The class is now in
   no markup and no script, so the selector is gone from here too
   rather than sitting in the list looking load bearing. */
.tty__input:focus,
.w98pad:focus {
  outline: none;
}