/* ------------------------------------------------------------------
   base.css - fonts, colours and global rules.

   Every colour here was read out of a screenshot of a real IRIX 6.5
   screen, so the numbers are not guesses.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "SGI Helvetica";
  font-style: normal;
  font-weight: normal;
  src: url("../assets/fonts/helvetica-oblique.woff2") format("woff2");
}

@font-face {
  font-family: "SGI Helvetica";
  font-style: normal;
  font-weight: bold;
  src: url("../assets/fonts/helvetica-oblique2.woff2") format("woff2");
}

@font-face {
  font-family: "SGI Screen";
  font-style: normal;
  font-weight: normal;
  src: url("../assets/fonts/scr.woff2") format("woff2");
}

@font-face {
  font-family: "SGI Digital";
  font-style: normal;
  font-weight: normal;
  src: url("../assets/fonts/DS-DIGI.woff2") format("woff2");
}

:root {
  /* Widget face and its two bevel tones, inside a window. */
  --face: #aaaaaa;
  --face-lt: #d6d6d6;
  --face-dk: #555555;
  --face-md: #848484;

  /* The frame and title bar of the window that has the focus. IRIX
     paints them in this khaki, not in blue. */
  --title-a: #a59f80;
  --title-lt: #dad7ca;
  --title-dk: #5b5746;

  /* The frame of every other window: the same grey as a widget. */
  --title-off-a: #aaaaaa;
  --title-off-lt: #d6d6d6;
  --title-off-dk: #555555;

  --ink: #000000;
  --ink-dim: #3d3d3d;
  --select: #3c5f8f;

  /* The Toolchest has its own, lighter grey. */
  --tc-face: #c1c1c1;
  --tc-lt: #e8e8e8;
  --tc-dk: #707070;
  --tc-head: #808080;

  /* The box behind the name under a desktop icon. */
  --icon-label: #bebebe;

  /* The box a minimized window turns into. It is a darker grey than a
     widget, with its own pair of bevel tones. */
  --minim-face: #808080;
  --minim-lt: #c6c6c6;
  --minim-dk: #424242;

  /* Desktop below the wallpaper tile. */
  --desk: #4c719e;

  /* The start up screen. */
  --boot-top: #afd1fe;
  --boot-bottom: #5f5f8f;
  --boot-purple: #4b0083;
  --boot-yellow: #ffff00;
  --boot-console: #797979;
  /* The pale drop shadow under the welcome text. It is a solid tone,
     not a see through white: .crisp would round a see through shadow
     away to nothing. */
  --boot-shadow: #b9b9d2;
  /* The release notice in the bottom right corner of the screen. */
  --boot-release: #cbd8f2;

  /* The login panel. It is the same grey as any other widget, so it
     takes the --face tones above and only needs these two of its own:
     a text field, which is a shade darker than the panel, and the
     yellow an account is marked with once it is picked.

     design/login.png looks blue because the picture was taken off a
     screen with a phone. design/login_origin.png is the true one. */
  --lg-field: #969696;
  --lg-mark: #ffe800;

  /* Terminal colours. */
  --term-bg: #000000;
  --term-fg: #c8c8c8;
  --term-green: #7ec87e;

  /* IRIX uses the slanted face for menus and window titles, and a
     plain upright one for icon names. */
  --font-ui: "SGI Helvetica", Helvetica, Arial, sans-serif;
  --font-label: Helvetica, Arial, sans-serif;
  --font-mono: "SGI Screen", "Liberation Mono", "Courier New", monospace;

  --bevel: 2px;
  --title-h: 23px;
  --frame: 6px;

  /* The real cursors from an SGI machine. Every file is 32x32 and
     carries its own hot spot, but the hot spot is written out here as
     well: some browsers do not read it out of the file. */
  --cur-pointer: url("../assets/cursor/pointer.cur") 5 5;
  --cur-text: url("../assets/cursor/text.cur") 8 12;
  --cur-watch: url("../assets/cursor/watch.cur") 10 7;
  --cur-move: url("../assets/cursor/move.cur") 11 10;
  --cur-col: url("../assets/cursor/resize-col.cur") 12 9;
  --cur-row: url("../assets/cursor/resize-row.cur") 8 11;
  --cur-ldiag: url("../assets/cursor/resize-left-diag.cur") 7 8;
  --cur-rdiag: url("../assets/cursor/resize-right-diag.cur") 7 8;
  --cur-hand: url("../assets/cursor/hand.cur") 8 4;
  --cur-cross: url("../assets/cursor/crosshair.cur") 9 9;
  --cur-help: url("../assets/cursor/help.cur") 5 5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- No anti-aliasing -------------------------------------------------
   These three properties only work on a Mac, so on their own the text
   still comes out smooth. The rule that does the real work is .crisp
   below. */
html,
body,
input,
textarea,
select,
button {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: geometricPrecision;
}

/* .crisp cuts the soft grey edge off every letter.

   A browser always draws text with anti-aliasing, and no font setting
   turns it off. So the element is sent through the SVG filter in
   index.html, which rounds the transparency of every pixel to either 0
   or 1. A pixel that is half covered by a letter becomes either fully
   the ink colour or fully see through, and the letter comes out with
   hard edges, the way an X server drew it in 1998.

   The filter can only do this over a see through background, so the
   element that wears .crisp must not paint its own background. Its
   parent paints it instead. */
.crisp {
  filter: url("#crisp");
}

/* The parts that already sit on a see through background need no box of
   their own, so they can take the filter straight from a rule. */
.mlabel,
.placeholder-title,
.placeholder-text,
.term-row,
.term-line,
.wp-name,
.mp-display,
.mp-counter {
  filter: url("#crisp");
}

img {
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  user-select: none;
}

/* --- Cursors ----------------------------------------------------------
   The red arrow set from a real IRIX machine. Each rule names the
   browser cursor it stands in for, so anything that asks for that
   cursor gets the SGI drawing of it. */

body,
body * {
  cursor: var(--cur-pointer), default;
}

input,
textarea,
[contenteditable],
.term,
.term * {
  cursor: var(--cur-text), text;
}

a,
button,
.mbtn,
.mmenu-item,
.tb-btn,
.shelf-item,
.shelf-item * {
  cursor: var(--cur-pointer), default;
}

/* The hand goes on the things you pick up or press: an icon on the
   desktop, a row of the Toolchest, an account on the login panel. */
.dicon,
.dicon *,
.lg-user,
.lg-user *,
.tc-head,
.tc-head *,
.tc-item,
.tc-item * {
  cursor: var(--cur-hand), pointer;
}

/* A slider and the seek bar are dragged, not typed into. The rule above
   for input would give them the text cursor, so they are named here.
   An attribute in the name beats a plain tag name, whatever the order
   of the rules. */
input[type="range"],
input[type="checkbox"],
input[type="radio"],
.mp-bar,
.mp-bar * {
  cursor: var(--cur-hand), pointer;
}

.tb-label {
  cursor: var(--cur-move), move;
}

/* --- Cursors held during a drag --------------------------------------
   While a window is moved or resized the pointer leaves the edge it
   started on, so the cursor has to be held from the body. js/wm sets
   one of these classes for as long as the button is down. */

body.grab-move,
body.grab-move * {
  cursor: var(--cur-move), move !important;
}

body.grab-row,
body.grab-row * {
  cursor: var(--cur-row), ns-resize !important;
}

body.grab-col,
body.grab-col * {
  cursor: var(--cur-col), ew-resize !important;
}

body.grab-ldiag,
body.grab-ldiag * {
  cursor: var(--cur-ldiag), nwse-resize !important;
}

body.grab-rdiag,
body.grab-rdiag * {
  cursor: var(--cur-rdiag), nesw-resize !important;
}

.win-grip-n,
.win-grip-s {
  cursor: var(--cur-row), ns-resize;
}

.win-grip-w,
.win-grip-e {
  cursor: var(--cur-col), ew-resize;
}

.win-grip-nw,
.win-grip-se {
  cursor: var(--cur-ldiag), nwse-resize;
}

.win-grip-ne,
.win-grip-sw {
  cursor: var(--cur-rdiag), nesw-resize;
}

/* The hourglass, shown by hand while the fake lag runs. */
body.busy,
body.busy * {
  cursor: var(--cur-watch), wait !important;
}

/* Everything is off until the visitor clicks once. Browsers refuse to
   play the boot sound before a real user gesture. */
#gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  background: #000;
  color: #c8c8c8;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: var(--cur-pointer), pointer;
}

#gate .gate-name {
  font-family: var(--font-ui);
  font-size: 15px;
  letter-spacing: 3px;
  color: #b9c4d2;
}

#gate .gate-hint {
  letter-spacing: 2px;
  animation: gate-blink 1.4s steps(1) infinite;
}

@keyframes gate-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* The SVG that holds the .crisp filter. It draws nothing itself. */
#fx {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

[hidden] {
  display: none !important;
}