/* interjet.css -- the stylesheet for www.alaska.net/~royce/interjet/.
 *
 * It reproduces the page's original HTML 3.2-era look with valid CSS: the
 * browser's default fonts, tables drawn the way <table border="1"> draws
 * them, and the orange tab cells, on plain white.  Each rule names the old
 * attribute it replaces.  The tabs need no JavaScript; see TABS.
 *
 * Author: Royce Williams
 * SPDX-License-Identifier: MIT
 *
 * Copyright (c) 2026 Royce Williams
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

body {
  background: #fff;                           /* the old tiled whistle image is dropped */
}

/* ---- banner and small text ------------------------------------------ */

header {                                      /* logo and title side by side, */
  display: flex;                              /* the title centred on the logo */
  align-items: center;                        /* (<img align=middle>); on a phone */
  gap: 0.5em;                                 /* it wraps in its own column */
}
header h1 { margin: 0; }                      /* the header's height is the logo's */
header img { border: 0; }                     /* <img border=0> */

h1 { font-size: 1.5em; }                      /* the same size as the h2s */
.small { font-size: small; }                  /* <font size="-1"> */
.select { text-align: center; }               /* <div align="center"> */
.strike { text-decoration: line-through; }    /* text kept but struck out */

/* ---- the projects block ---------------------------------------------- */

/* Was <table align="left"><tr><td>: a left float, shrink-wrapped, with the
   table's 2px spacing plus 1px cell padding around its content. */
.projects {
  float: left;
  padding: 3px;
  position: relative;                         /* the box the .t anchors pin to */
}
.clear { clear: both; }                       /* <br clear="all"> */

/* Appliance projects was the layout table's second row: 2px of spacing
   and 1px of cell padding either side added 4px above it. */
.projects h2 { margin-top: calc(0.83em + 4px); }

/* What <table border="1"> draws: a raised frame, sunken cells, 2px between
   cells and 1px inside them, widened to 4px left and right so adjacent
   cells' text does not run together.  The two greys are the ones Firefox
   renders for that markup, measured, so every browser draws the same
   thing. */
table.board {
  border: 1px solid;
  border-color: #b2b2b2 #4c4c4c #4c4c4c #b2b2b2;   /* top right bottom left */
  border-spacing: 2px;
}
table.board th,
table.board td {
  border: 1px solid;
  border-color: #4c4c4c #b2b2b2 #b2b2b2 #4c4c4c;
  padding: 1px 4px;                           /* top/bottom, left/right */
}

/* ---- TABS: two rows per panel, the current cell bold and unlinked ---- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;                                   /* cellspacing="2" */
  padding: 2px;
}
.tabs > * {
  padding: 4px;                               /* cellpadding="4" */
  white-space: nowrap;                        /* nowrap */
}
/* Each old cell was &nbsp;<font>label</font>&nbsp;: the spaces were in the
   cell's own medium font, outside the link, and set the cell's height. */
.tabs > *::before,
.tabs > *::after {
  content: "\a0";
  font-size: medium;
  display: inline-block;                      /* keeps the link underline off */
}
.machine > * { font-size: large; }            /* <font size="+1"> */
.machine > b { background: #ffb521; }         /* the logo's orange */
.machine > a { background: #ffe3a8; }
.topic > * { font-size: small; }              /* <font size="2"> */
.topic > b { background: #ffd88a; }
.topic > a { background: #fff0cf; }

hr.tabrule {                                  /* <hr size=1 noshade color> */
  border: 0;
  height: 1px;
  background: #9c6b18;
}

/* Showing one panel.  A tab links to an empty anchor (.t) pinned to the top
   of .projects, so every click lands at the same place, the section
   heading at the window's top, whatever the panel's length; the panel
   after the anchor that is the :target is shown.  With no fragment,
   InterJet I Hardware shows.  A browser without :root shows every
   panel, in order. */
.t { position: absolute; top: 0; }
:root .panel { display: none; }
:root .p-interjet1-hardware { display: block; }
.t:target ~ .panels .p-interjet1-hardware { display: none; }
#interjet1-hardware:target ~ .panels .p-interjet1-hardware,
#interjet1-netbsd:target ~ .panels .p-interjet1-netbsd,
#interjet1-other-os:target ~ .panels .p-interjet1-other-os,
#interjet2-hardware:target ~ .panels .p-interjet2-hardware,
#interjet2-netbsd:target ~ .panels .p-interjet2-netbsd,
#interjet2-other-os:target ~ .panels .p-interjet2-other-os { display: block; }

/* ---- photos: the heroes on index.html, the gallery on photos.html ---- */

/* Thumbnails carry their own width and height, so the pages lay out
   without these rules; these add the wrapping rows and the zoom. */
.heroes, .gallery {                           /* rows of photos that wrap */
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  align-items: stretch;                       /* the frames in a row match in height */
}
.heroes img, .gallery img {
  border: 0;                                  /* no link border round a photo */
  max-width: 100%;                            /* never wider than a phone */
  height: auto;                               /* keep the shape when narrowed */
}
.heroes figure, .gallery figure {             /* one framed cell per photo, */
  margin: 0;                                  /* its caption wrapping under it */
  padding: 6px;
  border: 1px solid #ccc;
}
.gallery figure { width: 300px; }
.heroes figure {                              /* as wide as its photo, the captions */
  max-width: 100%;                            /* being shorter; never wider than */
  box-sizing: border-box;                     /* the page, frame included */
}
.heroes figure img, .gallery figure img {     /* a narrow photo sits centred */
  display: block;                             /* in its cell, not to the left */
  margin: 0 auto;
}
.heroes figcaption, .gallery figcaption { font-size: small; }
.heroes figcaption { text-align: center; }    /* a short label under each hero */
.credit { font-style: italic; }

/* ZOOM, with no JavaScript: a thumbnail links to #z-NAME, and the overlay
   with that id shows while it is the URL's fragment (:target).  The X and
   the dark backdrop both link to the photo's own figure, which closes the
   overlay and leaves the reader where they were.  Its image loads only
   when shown (loading="lazy"). */
.zoom { display: none; }
.zoom:target {
  display: flex;                              /* centre the photo */
  align-items: center;
  justify-content: center;
  position: fixed;                            /* cover the window, not the page */
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.85);
}
.zoom-bg {                                    /* the backdrop is a close link */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.zoom img {
  position: relative;                         /* above the backdrop link */
  max-width: 95vw;
  max-height: 90vh;
  width: auto;                                /* override the size attributes */
  height: auto;
}
.zoom-x:link, .zoom-x:visited {               /* beats a:link in dark mode */
  position: absolute;
  top: 0.25em;
  right: 0.5em;
  color: #fff;
  font-size: 2em;
  text-decoration: none;
}

/* ---- footer: was a three-cell table, left and right used ------------- */

footer {
  padding: 3px;                               /* the table's spacing + padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---- DARK MODE: the same page re-drawn for a dark screen, not inverted.
   It follows the reader's system setting.  Warm near-black rather than
   pure black, the table's raised look re-shaded, the orange tabs kept,
   and the logo as it is: on dark only its outer outline is lost, and the
   orange body still carries the shape. */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  body { background: #1c1b19; color: #e4e1d8; }
  a:link { color: #8cb4ff; }
  a:visited { color: #c9a2ff; }
  a:active { color: #ffb521; }
  hr { border-color: #4a4740; }
  .heroes figure, .gallery figure { border-color: #4a4740; }
  hr.tabrule { background: #c48a22; }
  kbd { color: #f2d48f; }
  table.board { border-color: #6a665c #2a2925 #2a2925 #6a665c; }
  table.board th,
  table.board td { border-color: #2a2925 #6a665c #6a665c #2a2925; }
  .machine > b { background: #ffb521; color: #1c1b19; }
  .machine > a { background: #4d3b17; color: #ffd37a; }
  .topic > b { background: #e0a43a; color: #1c1b19; }
  .topic > a { background: #3a2f1a; color: #ffd37a; }
}