/* ==========================================================================
   desktop environment — the Origin 4000 generalisation
   The reusable layer: load this after a page's base stylesheet and pair it
   with assets/desktop.js and the components in src/components/desktop/.
   The desk is the page ground. The home route is the desktop: floating
   windows and objects the page supplies. Every other route is a document —
   a maximised window on the same desk. The chip and the strip float over
   both; the documents keep their own theme.
   ========================================================================== */

/* The SGI Screen font — IRIX's home-grown terminal face, converted by Sphere
   Group (github.com/sphere-group/sgi_screen, MIT) from the original
   -sgi-screen-medium-r-normal--13-130-72-72-m-70 bitmap into an .rfn, and
   built from that into this web font: 7 px advance, 13 px body, 10 px above
   the baseline. Licence alongside the file. */
@font-face {
  font-family: "SGI Screen";
  src: url("fonts/sgi-screen.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The SGI corporate typefaces — designed for Silicon Graphics by Joseph
   Stitzlein with Landor Associates for the 1999 "sgi" identity. They carry
   the desktop's own chrome: the medium cut for the names of things, the
   extrabold italic for the oblique title bars. Provenance alongside the
   files. */
@font-face {
  font-family: "SGI";
  src: url("fonts/sgi-medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SGI";
  src: url("fonts/sgi-extrabold-italic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --ws-desk: oklch(13% 0.024 252);
  --ws-chrome: oklch(19% 0.028 252);
  --ws-line: oklch(34% 0.018 252);
  --ws-fg: oklch(96% 0.005 252);
  --ws-muted: oklch(65% 0.02 252);
  --ws-sand: oklch(80% 0.088 85);
  --ws-sand-ink: oklch(22% 0.028 85);
  --ws-signal: oklch(74% 0.13 252);
  --ws-status-h: 30px;
  --ws-top: 48px;
  --ws-shelf: 132px;
  /* a maximised surface starts clear of the Toolchest, which floats above */
  --ws-filled-top: 80px;
}

html {
  background: var(--ws-desk);
}

body {
  background: var(--ws-desk);
}

.ws {
  height: 100svh;
  padding-bottom: var(--ws-status-h);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

body.is-workstation {
  overflow: hidden;
}

#work,
#credentials,
#availability,
#contact {
  scroll-margin-top: 56px;
}

.skip {
  background: var(--ws-sand);
  color: var(--ws-sand-ink);
}

/* --- toolchest chip ------------------------------------------------------ */

.ws:not(.ws-ready) [data-ws-command] {
  display: none;
}

/* The chip is the phone's way to the command panel; on the desk the classic
   Toolchest takes its place (see `.ws-chest`). */
.ws-chip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  background: color-mix(in oklch, var(--ws-chrome) 92%, var(--ws-desk));
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  font: inherit;
  font-family: "SGI", var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.ws-chip:hover,
.ws-chip[aria-expanded="true"] {
  border-color: var(--ws-sand);
  color: var(--ws-sand);
}

.ws-chip__sq {
  width: 9px;
  height: 9px;
  background: var(--ws-chrome);
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 26%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.7);
}

.ws-chip__name {
  font-family: "SGI", var(--font-body);
  font-weight: 700;
  font-style: italic;
}

.ws-chip__cv {
  font-size: 0.5625rem;
  color: var(--ws-muted);
}

.ws-toggle {
  min-height: 30px;
  padding: 0 10px;
  background: transparent;
  border-color: var(--ws-line);
  color: var(--ws-fg);
}

.ws-toggle:hover {
  border-color: var(--ws-sand);
  color: var(--ws-sand);
}

.ws-chip :focus-visible,
.ws-status :focus-visible,
.ws-panel :focus-visible,
.win :focus-visible {
  outline-color: var(--ws-sand);
}

/* --- the classic Toolchest: the panel that is simply there ----------------- */

.ws-chest {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 70;
  width: max-content;
  max-width: calc(100vw - 16px);
  background: var(--ws-chrome);
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
}

.ws-chest__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 7px;
  background: var(--ws-chrome);
  border-bottom: 1px solid var(--ws-line);
}

.ws-chest__id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ws-chest__sq {
  width: 9px;
  height: 9px;
  background: var(--ws-chrome);
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 26%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.7);
}

.ws-chest__title {
  font-family: "SGI", var(--font-body);
  font-weight: 700;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ws-fg);
}

/* On a document route the page is a document window on the same desk: the
   Toolchest stays, exactly as it does everywhere else. */

/* --- command panel ------------------------------------------------------ */

.ws-panel {
  position: fixed;
  top: 44px;
  left: 10px;
  z-index: 70;
  width: min(520px, calc(100vw - 20px));
  background: var(--ws-chrome);
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  box-shadow: 0 22px 50px -26px oklch(0% 0 0 / 0.8);
}

.ws-panel__field {
  padding: 8px;
  border-bottom: 1px solid var(--ws-line);
}

.ws-panel input {
  width: 100%;
  padding: 7px 9px;
  background: var(--ws-desk);
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.ws-panel input::placeholder {
  color: var(--ws-muted);
}

.ws-panel__scroll {
  max-height: min(46vh, 360px);
  overflow: auto;
}

.ws-panel__scroll nav + nav {
  border-top: 1px solid var(--ws-line);
}

.ws-panel__list {
  padding: 4px 0;
}

.ws-panel__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  min-height: 36px;
  color: var(--ws-fg);
  text-decoration: none;
  font-family: "SGI", var(--font-body);
  font-size: 0.875rem;
}

.ws-panel__list a:hover,
.ws-panel__list a[data-active="true"] {
  background: color-mix(in oklch, var(--ws-chrome) 74%, var(--ws-sand));
}

.ws-panel__k {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-muted);
}

.ws-panel__empty {
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: var(--ws-muted);
}

.ws-panel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--ws-line);
}

/* --- status strip ------------------------------------------------------- */

.ws-status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--ws-chrome);
  border-top: 1px solid var(--ws-line);
  color: var(--ws-muted);
}

.ws-status__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100% - 20px, 1460px);
  margin-inline: auto;
  min-height: var(--ws-status-h);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.ws-status b {
  color: var(--ws-fg);
  font-weight: 500;
}

.ws-status__spacer {
  flex: 1 1 auto;
}

/* --- the four desks ------------------------------------------------------
   The desk cell in the strip cycles the four workspaces; the Toolchest lists
   them. Both only exist above the floating breakpoint, where windows float
   and can belong to a desk. */

.ws-status__desk {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ws-muted);
  cursor: pointer;
}

.ws-status__desk:hover {
  color: var(--ws-fg);
}

.ws-status__desk:hover b {
  color: var(--ws-sand);
}

.ws-panel__desks .ws-desk {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  min-height: 36px;
  background: transparent;
  border: 0;
  color: var(--ws-fg);
  text-align: left;
  font: inherit;
  font-family: "SGI", var(--font-body);
  font-size: 0.875rem;
  cursor: pointer;
}

.ws-panel__desks .ws-desk:hover,
.ws-panel__desks .ws-desk[data-current="true"] {
  background: color-mix(in oklch, var(--ws-chrome) 74%, var(--ws-sand));
  color: var(--ws-sand-ink);
}

.ws-panel__desks .ws-desk:hover .ws-panel__k,
.ws-panel__desks .ws-desk[data-current="true"] .ws-panel__k {
  color: inherit;
  opacity: 0.75;
}

/* A desk switch is a state change worth a beat -- a quick fade of the scene,
   off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ws-scene {
    transition: opacity 180ms ease-out;
  }
  .ws-scene.is-switching {
    opacity: 0;
  }
}

/* --- the Toolchest, back as the classic panel ------------------------------ */

.ws-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 7px;
  background: var(--ws-chrome);
  border-bottom: 1px solid var(--ws-line);
}

.ws-panel__id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* the strip's own menu button, as the 6.5 Toolchest drew it */
.ws-panel__sq {
  width: 9px;
  height: 9px;
  background: var(--ws-chrome);
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 26%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.7);
}

.ws-panel__title {
  font-family: "SGI", var(--font-body);
  font-weight: 700;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ws-fg);
}

.ws-panel__collapse {
  min-width: 26px;
  min-height: 22px;
  background: transparent;
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  font: inherit;
  font-size: 0.625rem;
  cursor: pointer;
}

.ws-panel__collapse:hover {
  background: color-mix(in oklch, var(--ws-sand) 40%, var(--ws-chrome));
  color: var(--ws-sand-ink);
}

/* the six menus: one ruled row, each name led by its beveled square, as the
   6.5 Toolchest drew them */
.tc {
  border-bottom: 0;
}

.tc__list {
  list-style: none;
  margin: 0;
  padding: 2px 4px 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.tc__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 8px;
  background: transparent;
  border: 0;
  color: var(--ws-fg);
  font: inherit;
  cursor: pointer;
}

.tc__name {
  font-family: "SGI", var(--font-body);
  font-style: italic;
  font-size: 0.875rem;
}

.tc__sq {
  width: 9px;
  height: 9px;
  background: var(--ws-chrome);
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 26%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.7);
}

.tc__item:hover {
  background: color-mix(in oklch, var(--ws-chrome) 74%, var(--ws-sand));
  color: var(--ws-sand-ink);
}

.tc__item:hover .tc__sq {
  background: var(--ws-sand);
}

/* separators inside posted menus */
.ws-menu__sep {
  display: block;
  height: 1px;
  margin: 4px 10px;
  background: var(--ws-line);
}

/* --- the Desks Overview ---------------------------------------------------- */

.dsov {
  padding: 2px;
}

.dsov__note {
  margin: 0;
  color: var(--m-mut);
}

.dsov__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dsov__desk {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: var(--ws-desk);
  border: 1px solid var(--m-lo);
  cursor: pointer;
  overflow: hidden;
}

.dsov__desk:hover,
.dsov__desk:focus-visible {
  border-color: var(--m-mut);
  outline: none;
}

.dsov__desk.is-current {
  border-color: var(--m-sel);
}

.dsov__dlabel {
  position: absolute;
  top: 3px;
  left: 5px;
  z-index: 1;
  font-family: var(--m-mono);
  font-size: 0.625rem;
  color: var(--m-mut);
}

.dsov__desk.is-current .dsov__dlabel {
  color: var(--m-sel);
}

.dsov__box {
  display: block;
  position: absolute;
  inset: 0;
}

.dsov__win {
  position: absolute;
  display: block;
  background: var(--ws-chrome);
  border: 1px solid var(--m-hi);
}

.dsov__win.is-rested {
  background: transparent;
  border-color: var(--m-lo);
}

.dsov__win:hover {
  border-color: var(--m-sel);
}

/* --- the Icon Catalog -------------------------------------------------------- */

.iconcat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

.iconcat__pages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* the catalogue page: the cadet-blue pane of the 6.5 catalogue, read in
     the dark palette as a lifted slate rather than another black field */
  background: color-mix(in oklch, var(--m-field) 45%, oklch(42% 0.05 215));
}

.iconcat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  padding: 6px;
}

/* the page tabs: notebook leaves along the bottom, held on the selected page */
.iconcat__bar {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 6px;
  background: color-mix(in oklch, var(--m-face) 55%, var(--m-lo));
  border-top: 1px solid var(--m-lo);
}

.iconcat__tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.iconcat__tabs::-webkit-scrollbar {
  display: none;
}

.iconcat__tab {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 26px;
  padding: 4px 12px 3px;
  background: color-mix(in oklch, var(--m-face) 82%, var(--m-lo));
  border: 1px solid var(--m-lo);
  border-bottom: 0;
  box-shadow:
    inset 1px 1px 0 var(--m-hi),
    inset -1px 0 0 var(--m-lo);
  color: var(--m-mut);
  font: inherit;
  font-family: var(--m-font);
  font-size: 0.8125rem;
  cursor: pointer;
}

.iconcat__tab:hover {
  color: var(--m-ink);
}

.iconcat__tab[aria-selected="true"] {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding-top: 5px;
  background: color-mix(in oklch, var(--m-face) 68%, var(--m-hi));
  color: var(--m-ink);
}

.iconcat__scroll {
  flex: none;
  display: flex;
  gap: 2px;
  padding-bottom: 2px;
}

.iconcat__arrow {
  width: 26px;
  min-height: 22px;
  padding: 0;
  background: var(--m-face);
  border: 1px solid var(--m-lo);
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.iconcat__arrow:hover {
  border-color: var(--m-mut);
}

.iconcat__arrow:disabled {
  color: var(--m-dis);
  cursor: default;
}

.iconcat__n {
  font-family: var(--m-mono);
  font-size: 0.625rem;
  color: var(--m-mut);
}

/* the count under the tabs, a sunken status line like the 6.5 catalogue's */
.iconcat__status {
  flex: none;
  margin: 0;
  padding: 3px 8px 4px;
  background: var(--m-field);
  border-top: 1px solid var(--m-lo);
  box-shadow: inset 1px 1px 0 var(--m-lo);
  color: var(--m-mut);
  font-family: var(--m-font);
  font-size: 0.6875rem;
}

.iconcat__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 86px;
  padding: 8px 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--m-ink);
  font: inherit;
  cursor: pointer;
}

.iconcat__item:hover {
  border-color: var(--m-hi);
}

.iconcat__item:focus-visible {
  border-color: var(--m-sel);
  outline: none;
}

/* the selected icon takes the documented icon yellow, as on the desk */
.iconcat__item.is-selected {
  border-color: var(--m-hi);
}

.iconcat__item.is-selected .ic-fill {
  fill: var(--sgi-icon-selected);
}

.iconcat__item.is-selected .ic-badge {
  color: var(--sgi-icon-selected);
}

.iconcat__item.is-selected .ic-accent {
  fill: color-mix(
    in oklch,
    var(--sgi-icon-selected) 52%,
    var(--sgi-icon-accent)
  );
}

.iconcat__name {
  font-family: var(--m-font);
  font-size: 0.75rem;
  text-align: center;
}

/* --- the Audio Panel ---------------------------------------------------------- */

.apanel {
  display: grid;
  gap: 14px;
  padding: 4px;
}

.apanel__rows {
  display: grid;
  gap: 10px;
}

.apanel__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
}

.apanel__key {
  font-family: var(--m-font);
  font-size: 0.75rem;
  color: var(--m-mut);
}

.apanel__track {
  position: relative;
  height: 14px;
  background: var(--m-field);
  border: 1px solid var(--m-lo);
  box-shadow: var(--m-sink);
}

.apanel__fill {
  display: block;
  height: 100%;
  background: var(--m-mid);
}

.apanel__knob {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 4px;
  margin-left: -2px;
  background: var(--m-mut);
}

.apanel__val {
  font-family: var(--m-mono);
  font-size: 0.6875rem;
  text-align: right;
  color: var(--m-dis);
}

.apanel__mute {
  min-height: 28px;
  background: var(--m-face);
  border: 1px solid var(--m-lo);
  box-shadow: var(--m-raise);
  color: var(--m-dis);
  font: inherit;
  font-family: var(--m-font);
  font-size: 0.75rem;
  cursor: not-allowed;
}

.apanel__note {
  margin: 0;
  font-family: var(--m-font);
  font-size: 0.75rem;
  color: var(--m-mut);
}

/* --- Customize ----------------------------------------------------------------- */

.customize {
  display: grid;
  grid-template-columns: minmax(112px, 132px) minmax(0, 1fr);
  gap: 14px;
  padding: 4px;
}

/* the section strip: the window's own vertical menu, flush at the left */
.customize__strip {
  display: grid;
  gap: 4px;
  align-content: start;
  padding-right: 10px;
  border-right: 1px solid var(--m-lo);
}

.customize__sec {
  min-height: 28px;
  padding: 4px 9px;
  background: var(--m-face);
  border: 1px solid var(--m-lo);
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font: inherit;
  font-family: var(--m-font);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}

.customize__sec:hover {
  border-color: var(--m-mut);
}

.customize__sec[aria-current="true"] {
  background: color-mix(in oklch, var(--m-face) 90%, var(--m-lo));
  box-shadow: var(--m-sink);
}

.customize__pages {
  min-width: 0;
}

.cst__section {
  display: grid;
  gap: 8px;
}

.cst__head {
  margin: 0;
  font-family: var(--m-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-ink);
}

.cst__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cst__opt {
  min-height: 26px;
  padding: 0 10px;
  background: var(--m-face);
  border: 1px solid var(--m-lo);
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font: inherit;
  font-family: var(--m-font);
  font-size: 0.75rem;
  cursor: pointer;
}

.cst__opt:hover {
  border-color: var(--m-mut);
}

.cst__opt:active {
  box-shadow: var(--m-sink);
}

.cst__opt[aria-checked="true"] {
  background: var(--m-sel);
  border-color: var(--m-sel);
  color: var(--m-sel-fg);
  box-shadow: var(--m-sink);
}

.cst__note {
  margin: 0;
  font-family: var(--m-font);
  font-size: 0.75rem;
  color: var(--m-mut);
}

.cst__go {
  min-height: 28px;
  padding: 0 10px;
  background: var(--m-face);
  border: 1px solid var(--m-lo);
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font: inherit;
  font-family: var(--m-font);
  font-size: 0.75rem;
  cursor: pointer;
}

.cst__go:hover {
  border-color: var(--m-sel);
}

.cst__go:active {
  box-shadow: var(--m-sink);
}

/* --- Customize outcomes: the background and the bevels ------------------------ */

html[data-ground="flat"] .ws-scene {
  background: var(--ws-desk);
}

html[data-ground="dim"] .ws-scene {
  background: color-mix(in oklch, var(--ws-desk) 60%, oklch(0% 0 0));
}

/* The bevel choice: classic carries the two-line window frame; flat replaces
   it with a single flat frame, so the two choices read apart. */
html[data-bev="flat"] .win {
  border-color: var(--ws-line);
}

html[data-bev="classic"] .ws-panel {
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 20%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.72),
    0 22px 50px -26px oklch(0% 0 0 / 0.8);
}

html[data-bev="classic"] .ws-menu {
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 20%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.72),
    0 18px 40px -22px oklch(0% 0 0 / 0.8);
}

/* --- dragging the objects ------------------------------------------------------- */

.obj.is-dragging {
  opacity: 0.55;
}

body.obj-dragging,
body.obj-dragging * {
  cursor: grabbing;
}

/* --- the desktop scene (every route) ------------------------------------- */

/* The route's content sits in this wrapper: layout-transparent, so the
   windows inside still resolve against the scene and the wrapper never
   becomes a containing block. Its contents swap on navigation. */
.ws-route {
  display: contents;
}

/* The stock blog pages read inside the document window: their wide gutters
   collapse to the reading column, and the sticky rails become static. */
.win__body .article {
  max-width: none;
  margin: 0;
}

.win__body .article-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--spacing-6) 0;
}

.win__body .article-meta-col,
.win__body .article-sidebar {
  display: none;
}

.win__body .article-header .article-meta {
  display: flex;
}

.win__body .meta-sticky,
.win__body .sidebar-sticky {
  position: static;
}

.ws-scene {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    /* The Indigo Magic weave: the root window's fine dither, kept in the
       dark palette. It rides the default ground; Flat and Dim replace the
       whole stack, so those choices stay plain. */
    repeating-conic-gradient(
      from 0deg,
      color-mix(in oklch, var(--ws-fg) 4%, transparent) 0% 25%,
      transparent 0% 50%
    )
    0 0 / 4px 4px,
    radial-gradient(
      150% 120% at 16% -14%,
      color-mix(in oklch, var(--ws-signal) 12%, transparent),
      transparent 58%
    ),
    radial-gradient(
      110% 110% at 94% 116%,
      color-mix(in oklch, var(--ws-chrome) 66%, transparent),
      transparent 56%
    ),
    var(--ws-desk);
}

.ws-objects {
  position: absolute;
  top: 52px;
  right: 16px;
  /* Below the windows: a maximised surface covers the shelf, as 4Dwm covers
     its icons. Dragged windows are clamped clear of it by `bounds()`. */
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 104px;
  max-height: calc(100% - 74px);
  overflow-y: auto;
  scrollbar-width: none;
}

.ws-objects::-webkit-scrollbar {
  display: none;
}

.obj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ws-fg);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.obj__art {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background:
    repeating-conic-gradient(
      from 0deg,
      color-mix(in oklch, var(--ws-fg) 3%, transparent) 0% 25%,
      transparent 0% 50%
    )
    0 0 / 4px 4px,
    linear-gradient(
      145deg,
      color-mix(in oklch, var(--ws-fg) 7%, transparent),
      transparent 46%
    ),
    color-mix(in oklch, var(--ws-chrome) 52%, transparent);
  border: 1px solid color-mix(in oklch, var(--ws-line) 78%, transparent);
  /* the raised icon plate of the classic desktop, in the dark palette */
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 18%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.62);
}

.obj:hover .obj__art,
.obj:focus-visible .obj__art {
  border-color: var(--ws-sand);
  color: var(--ws-sand);
}

.obj__name {
  max-width: 104px;
  padding: 2px 5px;
  background: color-mix(in oklch, var(--ws-chrome) 84%, transparent);
  border: 1px solid color-mix(in oklch, var(--ws-line) 78%, transparent);
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 12%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.5);
  font-family: "SGI", var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* --- windows ------------------------------------------------------------- */

.win {
  /* 4Dwm's frame: a thin raised bevel — a light top/left edge and a dark
     bottom/right edge over a 1 px black outline, never rounded. */
  --win-hi: color-mix(in oklch, var(--ws-fg) 22%, var(--ws-chrome));
  --win-lo: color-mix(in oklch, var(--ws-chrome) 45%, oklch(0% 0 0));
  position: absolute;
  left: var(--win-x, 24px);
  top: var(--win-y, 24px);
  z-index: 2;
  width: var(--win-w, 460px);
  height: var(--win-h, 380px);
  max-width: calc(100% - 8px - var(--ws-shelf));
  max-height: calc(100% - var(--ws-top) - 8px);
  display: flex;
  flex-direction: column;
  background: var(--ws-chrome);
  border: 3px solid var(--ws-chrome);
  border-top-color: var(--win-hi);
  border-left-color: var(--win-hi);
  border-right-color: var(--win-lo);
  border-bottom-color: var(--win-lo);
  outline: 1px solid oklch(0% 0 0 / 0.85);
  color: var(--ws-fg);
}

.win[hidden] {
  display: none;
}

/* A maximised surface covers the whole desk, shelf and all — the 4Dwm
   behaviour of a maximised window covering the desktop icons. It starts
   below the Toolchest, which floats above the desk. */
.win--filled {
  left: 8px;
  top: var(--ws-filled-top, var(--ws-top));
  width: calc(100% - 16px);
  max-width: none;
  height: calc(100% - var(--ws-filled-top, var(--ws-top)) - 8px);
}

.win__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 2px;
  /* the 50% stipple the 4Dwm title bar drew, kept faint in the dark palette */
  background-color: var(--ws-chrome);
  background-image: repeating-conic-gradient(
    from 0deg,
    color-mix(in oklch, var(--ws-fg) 7%, transparent) 0% 25%,
    transparent 0% 50%
  );
  background-size: 2px 2px;
  border-bottom: 1px solid var(--ws-line);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* The active surface takes the signal — the 2026 reading of 4Dwm's highlight
   bar. An unfocused bar keeps the neutral chrome and a muted title. */
.win--focused .win__bar {
  background: var(--sgi-wm-active-background);
  color: var(--sgi-wm-active-foreground);
  border-bottom-color: color-mix(
    in oklch,
    var(--ws-sand) 55%,
    var(--ws-desk)
  );
}

.win:not(.win--focused) .win__bar {
  color: var(--ws-muted);
}

/* The title-bar controls: square, with the two-line bevel. Hover and press
   invert the bevel rather than recolouring the glyph. */
.win__menu,
.win__b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 30%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.5);
}

.win__menu:hover,
.win__b:hover,
.win__menu:active,
.win__menu[aria-expanded="true"],
.win__b:active {
  box-shadow:
    inset -1px -1px 0 color-mix(in oklch, var(--ws-fg) 30%, transparent),
    inset 1px 1px 0 oklch(0% 0 0 / 0.5);
}

.win__bar :focus-visible {
  outline-color: currentColor;
  outline-offset: -2px;
}

.win__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "SGI", var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win__ctx {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.72;
}

.win__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  padding: 18px 20px 22px;
  font-size: 1rem;
  line-height: 1.6;
}

.win__body--flush {
  padding: 0;
}

.win__body h1 {
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
  max-width: 26ch;
}

.win__body .lede {
  margin-top: 12px;
  max-width: 58ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.win__body .kicker {
  margin-bottom: 10px;
}

.win__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.win__list li {
  border-bottom: 1px solid var(--border);
}

.win__list a {
  display: block;
  padding: 9px 0;
  color: var(--fg);
  text-decoration: none;
}

.win__list a:hover .win__name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.win__list .win__row {
  display: block;
  padding: 9px 0;
  color: var(--fg);
}

.win__empty {
  margin: 0;
  padding: 9px 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.win__body > .rich ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.win__body > .rich li {
  margin-top: 4px;
}

.win__name {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
}

.win__sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.win__meta {
  display: block;
  margin-bottom: 3px;
}

.win__clock {
  display: grid;
  gap: 4px;
  text-align: center;
  padding: 12px 0;
}

.win__clock b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.win__clock span {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* --- application chrome --------------------------------------------------
   An application window is a toolbar, a work area and a status line. The
   list view is the work area most apps share; the readout and the property
   rows are for the readme and the profile. */

.win__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 0 7px;
  border-bottom: 1px solid var(--ws-line);
  background: color-mix(in oklch, var(--ws-chrome) 84%, var(--ws-desk));
  color: var(--ws-muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.win__status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 19px;
  padding: 0 7px;
  border-top: 1px solid var(--ws-line);
  background: color-mix(in oklch, var(--ws-chrome) 84%, var(--ws-desk));
  color: var(--ws-muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.tb__label {
  color: var(--ws-fg);
  font-weight: 500;
}

.tb__count {
  margin-inline-start: auto;
  color: var(--ws-muted);
}

.tb__btn {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 0 5px;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.tb__btn:hover {
  border-color: var(--ws-line);
  color: var(--ws-fg);
}

.tb__btn[aria-pressed="true"] {
  background: var(--ws-sand);
  border-color: var(--ws-sand);
  color: var(--ws-sand-ink);
}

.win--app .win__body {
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* the list view */
.lst__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px 5px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.win--app .win__list {
  border-top: 0;
  grid-template-columns: minmax(0, 1fr);
}

.win--app .win__list li {
  border-bottom: 1px solid var(--border);
}

.win--app .win__list li[hidden] {
  display: none;
}

.win--app .win__list a,
.win--app .win__list .win__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  color: var(--fg);
  text-decoration: none;
}

.win--app .win__list a:hover {
  background: color-mix(in oklch, var(--ws-sand) 16%, transparent);
}

.win--app .win__list a:hover .win__name {
  text-decoration: none;
}

.lst__main {
  min-width: 0;
}

.win--app .win__name {
  font-size: 0.8125rem;
  font-weight: 500;
}

.win--app .win__sub {
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  line-height: 1.4;
}

.lst__cell {
  flex: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.win--app .lst__empty {
  padding: 10px;
  border-bottom: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.win--app .win__empty {
  padding: 10px 12px;
}

/* the journal */
.win--app .note {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

.win--app .note__date {
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
}

.win--app .note__text {
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* the readme */
.readout {
  padding: 12px 12px 14px;
}

.readout__label {
  margin: 0 0 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.readout__statement {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.readout__sub {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.readout__block {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.readout__block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.readout__block--facts li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.readout__block--facts li:last-child {
  border-bottom: 0;
}

.readout__block--facts :is(b, strong) {
  flex: 0 0 38%;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.readout__block--tags ul {
  columns: 2;
  column-gap: 14px;
}

.readout__block--tags li {
  position: relative;
  padding: 2px 0 2px 12px;
  font-size: 0.75rem;
  break-inside: avoid;
}

.readout__block--tags li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

/* the profile */
.apppane {
  padding: 12px 12px 14px;
}

.prop {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.prop:last-child {
  border-bottom: 0;
}

.prop__key {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.7;
  text-transform: uppercase;
}

.prop__val {
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

.prop__val p {
  margin: 0 0 5px;
}

.prop__val p:last-child {
  margin-bottom: 0;
}

.prop__val :is(ul, ol) {
  margin: 0 0 5px;
  padding-left: 16px;
}

.prop__val li {
  margin: 3px 0;
}

.prop__val li:last-child {
  margin-bottom: 0;
}

.term {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  background: var(--ws-desk);
  color: var(--ws-fg);
  font-family: "SGI Screen", var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1;
}

.term__out {
  overflow: auto;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.term__in {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px 10px;
  border-top: 1px solid var(--ws-line);
}

.term__in span {
  color: var(--ws-sand);
}

.term__in input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ws-fg);
  font: inherit;
  font-family: "SGI Screen", var(--font-mono);
  font-size: 0.8125rem;
}

.term__in input:focus-visible {
  outline: none;
}

/* --- the asset library ---------------------------------------------------- */

.lib {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 0.9375rem;
}

.lib__count {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.lib__count b {
  color: var(--fg);
  font-weight: 500;
}

.lib__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--border);
}

.lib__pane {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.lib__tab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.lib__tab:hover {
  color: var(--fg);
}

.lib__tab[aria-selected="true"] {
  background: var(--ws-sand);
  color: var(--ws-sand-ink);
}

.lib__n {
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.lib__view {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 10px 12px;
}

.lib__path {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lib__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lib__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.lib__name {
  font-size: 0.875rem;
}

.lib__meta {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}

.lib__id {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--muted);
}

.lib__none {
  margin: 12px 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* --- the inventory app ---------------------------------------------------- */

.inv {
  display: grid;
  grid-template-columns: minmax(112px, 136px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 1rem;
}

/* the inventory's vertical menu strip: the item kinds down the left, flush
   against the window edge like the 6.5 tool rail */
.inv__rail {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 2px 8px 2px 2px;
  border-right: 1px solid var(--border);
}

.inv__rail .inv__kinds {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.inv__rail .inv__chip {
  justify-content: space-between;
}

.inv__head {
  margin-bottom: 14px;
}

.inv__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv__count b {
  color: var(--fg);
  font-weight: 500;
}

.inv__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.inv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inv__chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.inv__chip:hover {
  border-color: var(--fg);
}

.inv__chip[aria-pressed="true"] {
  background: var(--ws-sand);
  border-color: var(--ws-sand);
  color: var(--ws-sand-ink);
}

.inv__search {
  flex: 1 1 170px;
  min-width: 150px;
  padding: 6px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
}

.inv__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.inv__item {
  border-bottom: 1px solid var(--border);
}

.inv__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 10px 0;
  color: var(--fg);
  text-decoration: none;
}

.inv__row:hover .inv__name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.inv__name {
  font-weight: 500;
  font-size: 0.9375rem;
}

.inv__cond {
  align-self: baseline;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.inv__meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8125rem;
}

.inv__none {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.875rem;
}

.inv__empty {
  padding: 16px 0 6px;
  color: var(--muted);
}

.inv__empty p {
  max-width: 60ch;
  margin-top: 4px;
}

.inv__empty b {
  color: var(--fg);
}

.inv__record {
  padding-top: 4px;
}

.inv__back {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 10px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
}

.inv__back:hover {
  border-color: var(--ws-sand);
  color: var(--fg);
}

.inv__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  max-width: 30ch;
}

.inv__facts {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 5px 14px;
  margin: 14px 0 0;
  font-size: 0.875rem;
}

.inv__facts dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv__facts dd {
  margin: 0;
}

.inv__story {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.inv__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.inv__kinds,
.inv__sorts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inv__kn {
  margin-left: 6px;
  font-size: 0.625rem;
  opacity: 0.7;
}

.inv__kindtag {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv__gallery {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.inv__hero {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--border);
}

.inv__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inv__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
}

.inv__thumb[aria-pressed="true"] {
  border-color: var(--ws-sand);
}

.inv__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inv__related {
  margin-top: 16px;
}

.inv__related-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: inherit;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv__related-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.inv__related-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
}

.inv__related-list a:hover .inv__rel-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.inv__rel-name {
  font-size: 0.875rem;
}

.inv__rel-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.inv--app [data-inv-record] {
  display: none;
}

.inv--app.inv--record [data-inv-record].is-open {
  display: block;
}

.inv--app.inv--record [data-inv-head],
.inv--app.inv--record [data-inv-list],
.inv--app.inv--record [data-inv-none] {
  display: none;
}

/* --- grips, snapping, the surface menu ----------------------------------- */

.win__grip {
  position: absolute;
  touch-action: none;
}

.win__grip[data-ws-grip="n"] {
  top: -3px;
  left: 10px;
  right: 10px;
  height: 6px;
  cursor: ns-resize;
}
.win__grip[data-ws-grip="s"] {
  bottom: -3px;
  left: 10px;
  right: 10px;
  height: 6px;
  cursor: ns-resize;
}
.win__grip[data-ws-grip="e"] {
  right: -3px;
  top: 10px;
  bottom: 10px;
  width: 6px;
  cursor: ew-resize;
}
.win__grip[data-ws-grip="w"] {
  left: -3px;
  top: 10px;
  bottom: 10px;
  width: 6px;
  cursor: ew-resize;
}
.win__grip[data-ws-grip="ne"] {
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}
.win__grip[data-ws-grip="nw"] {
  top: -3px;
  left: -3px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}
.win__grip[data-ws-grip="se"] {
  bottom: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}
.win__grip[data-ws-grip="sw"] {
  bottom: -3px;
  left: -3px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

/* The classic corner grip: diagonal ridges in the resizable corner. */
.win__grip[data-ws-grip="se"]::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 2px,
    color-mix(in oklch, var(--ws-fg) 26%, transparent) 2px 3px
  );
  opacity: 0.72;
}

.ws-snap {
  position: absolute;
  z-index: 1;
  background: color-mix(in oklch, var(--ws-signal) 20%, transparent);
  border: 1px solid var(--ws-signal);
  pointer-events: none;
}

.ws-menu {
  position: fixed;
  z-index: 90;
  min-width: 180px;
  padding: 4px 0;
  background: var(--ws-chrome);
  border: 1px solid var(--ws-line);
  box-shadow: 0 18px 40px -22px oklch(0% 0 0 / 0.8);
}

.ws-menu__item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: 0;
  color: var(--ws-fg);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.ws-menu__item:hover {
  background: var(--ws-signal);
  color: var(--ws-desk);
}

/* --- the inspector and the log ------------------------------------------- */

.insp {
  font-size: 0.875rem;
}

.insp__scene {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.insp__scene b {
  color: var(--fg);
}

.insp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.insp__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.insp__name {
  font-weight: 500;
}

.insp__state {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.insp__state--open {
  color: var(--fg);
}

.insp__geom {
  grid-column: 1 / -1;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.insp__empty {
  margin: 0;
  color: var(--muted);
}

.log {
  font-size: 0.875rem;
}

.log__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.log__list li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.log__list time {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.log__empty {
  margin: 0;
  color: var(--muted);
}

/* --- the screen saver ----------------------------------------------------- */

.sv {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 0.875rem;
}

.sv__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv__lbl {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.sv__row,
.sv__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sv__btn {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  background: var(--m-face);
  border: 1px solid var(--m-lo);
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.sv__btn:hover {
  background: var(--m-mid);
}

.sv__btn:active {
  box-shadow: var(--m-sink);
}

.sv__btn[aria-pressed="true"] {
  background: var(--ws-signal);
  border-color: var(--ws-signal);
  color: var(--ws-desk);
  box-shadow: var(--m-sink);
}

.sv__note {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.sv-screen {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  overflow: hidden;
  background: var(--ws-desk);
}

.sv-screen--on {
  display: block;
}

.sv-screen__stage,
.sv-screen__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sv-screen__lock {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
}

.sv-screen--locked .sv-screen__lock {
  display: grid;
}

.sv-screen__box {
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: min(78vw, 380px);
  padding: 22px 26px;
  background: var(--ws-chrome);
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  text-align: center;
}

.sv-screen__lbl {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ws-muted);
}

.sv-screen__box p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ws-muted);
  line-height: 1.5;
}

.sv-screen__unlock {
  min-height: 30px;
  padding: 0 14px;
  background: var(--ws-sand);
  border: 1px solid var(--ws-sand);
  color: var(--ws-sand-ink);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}

/* --- status strip: resting windows --------------------------------------- */

.ws-status__rest {
  display: flex;
  gap: 4px;
  padding-inline-end: 8px;
}

.ws-rest {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: color-mix(in oklch, var(--ws-chrome) 80%, var(--ws-fg));
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
}

.ws-rest:hover {
  border-color: var(--ws-sand);
  color: var(--ws-sand);
}

/* --- the calculator and the calendar -------------------------------------- */

.calc {
  display: grid;
  gap: 10px;
}

.calc__display {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.calc__keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.calc__key {
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  cursor: pointer;
}

.calc__key:hover {
  border-color: var(--fg);
}

.calc__key:active {
  background: color-mix(in oklch, var(--ws-sand) 28%, transparent);
}

.calc__key--fn {
  color: var(--muted);
}

.calc__key--op {
  color: var(--ws-sand);
}

.calc__key--wide {
  grid-column: span 2;
}

.calc__key--eq {
  background: var(--ws-sand);
  border-color: var(--ws-sand);
  color: var(--ws-sand-ink);
}

.cal {
  display: grid;
  gap: 10px;
  font-size: 0.875rem;
}

.cal__bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.cal__nav,
.cal__today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 28px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}

.cal__nav:hover,
.cal__today:hover {
  border-color: var(--ws-sand);
  color: var(--fg);
}

.cal__dow,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cal__dow span {
  padding: 2px 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg);
}

/* a day that carries a note is a button: it opens the note */
.cal__day--note {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.cal__day--note:hover {
  outline: 1px solid var(--ws-signal);
  outline-offset: -1px;
}

.cal__day--note:focus-visible {
  outline: 2px solid var(--ws-signal);
  outline-offset: -2px;
}

.cal__day--picked {
  outline: 2px solid var(--ws-sand);
  outline-offset: -2px;
}

.cal__day--today {
  background: var(--ws-sand);
  color: var(--ws-sand-ink);
}

.cal__day--note::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  background: var(--ws-sand);
}

.cal__day--today.cal__day--note::after {
  background: var(--ws-sand-ink);
}

.cal__note {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.cal__note[hidden] {
  display: none;
}

.cal__note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cal__note-when {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cal__note-body {
  display: grid;
  gap: 5px;
}

.cal__note-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg);
}

.cal__note-text--muted {
  color: var(--muted);
}

.cal__note-open {
  flex: none;
  min-height: 24px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.cal__note-open:hover {
  border-color: var(--ws-sand);
}

.cal__foot {
  margin: 0;
  color: var(--muted);
  font-size: 0.6875rem;
}

/* the chosen lab note answers with a brief sand wash */
@keyframes note-flash {
  from {
    background: color-mix(in oklch, var(--ws-sand) 40%, transparent);
  }
  to {
    background: transparent;
  }
}

.note--flash {
  animation: note-flash 1.6s ease;
}

/* --- the phone navigation rail (hidden until the viewport narrows) --------- */

.ws-nav {
  display: none;
}

/* --- narrower viewports -------------------------------------------------- */

/* ==========================================================================
   Motif application kit — the app windows are IRIX GUI programs, not pages.
   The structure is the manuals': bevelled chrome, sunken work areas, a
   selection fill. The palette is the 2026 polarity — graphite surfaces with
   the station's signal for selection — so the face is never beige.
   Everything here is scoped to .win--app, so the documents and the desk
   chrome are untouched.
   ========================================================================== */

.win--app {
  --m-face: oklch(23% 0.02 252);
  --m-hi: oklch(35% 0.022 252);
  --m-mid: oklch(30% 0.02 252);
  --m-lo: oklch(12% 0.02 252);
  --m-ink: oklch(94% 0.008 252);
  --m-mut: oklch(68% 0.018 252);
  --m-field: oklch(16% 0.02 252);
  --m-sel: var(--ws-signal);
  --m-sel-fg: var(--ws-desk);
  --m-dis: oklch(46% 0.014 252);
  --m-font: Helvetica, "Nimbus Sans", "Liberation Sans", Arial, sans-serif;
  --m-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --m-raise: inset -1px -1px 0 var(--m-lo), inset 1px 1px 0 var(--m-hi);
  --m-sink: inset 1px 1px 0 var(--m-lo), inset -1px -1px 0 var(--m-hi);
}

/* --- the menu bar -------------------------------------------------------- */

.win__menubar {
  position: relative;
  z-index: 7;
  flex: none;
  background: var(--m-face);
  border-bottom: 1px solid var(--m-lo);
  box-shadow: inset 0 -1px 0 var(--m-hi);
}

.m-bar {
  display: flex;
  align-items: stretch;
  padding: 2px 4px 1px;
}

.m-bar__item {
  position: relative;
}

/* the Help menu is pushed to the far right of the bar, as 6.5 drew it */
.m-bar__item--end {
  margin-inline-start: auto;
}

.m-bar__btn {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 9px;
  background: transparent;
  border: 0;
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 12px;
  line-height: 1;
  cursor: default;
}

.m-bar__btn:hover,
.m-bar__btn[aria-expanded="true"] {
  background: var(--m-sel);
  color: var(--m-sel-fg);
}

.m-mn {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.m-pop {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  z-index: 90;
  min-width: 172px;
  padding: 3px;
  background: var(--m-face);
  box-shadow:
    inset -1px -1px 0 var(--m-lo),
    inset 1px 1px 0 var(--m-hi),
    0 12px 24px -12px oklch(0% 0 0 / 0.55);
}

.m-pop__it {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 3px 8px 3px 3px;
  background: transparent;
  border: 0;
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 12px;
  text-align: left;
  cursor: default;
}

.m-pop__it:hover,
.m-pop__it:focus-visible {
  background: var(--m-sel);
  color: var(--m-sel-fg);
  outline: none;
}

.m-pop__chk {
  flex: none;
  width: 15px;
  text-align: center;
  font-size: 11px;
}

.m-pop__it[aria-checked="true"] .m-pop__chk::before {
  content: "\2713";
}

.m-pop__lbl {
  flex: 1 1 auto;
  white-space: nowrap;
}

.m-pop__sep {
  margin: 3px 4px;
  border-top: 1px solid var(--m-lo);
  box-shadow: 0 1px 0 var(--m-hi);
}

/* --- the client area ----------------------------------------------------- */

.win--app .win__body {
  background: var(--m-face);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 12px;
  line-height: 1.4;
}

.win--app .win__tools {
  min-height: 27px;
  padding: 3px 7px;
  gap: 6px;
  border-bottom: 1px solid var(--m-lo);
  box-shadow: inset 0 -1px 0 var(--m-hi);
  background: var(--m-face);
  color: var(--m-mut);
  font-family: var(--m-font);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
}

.win--app .tb__label {
  color: var(--m-ink);
  font-weight: 400;
}
.win--app .tb__count {
  color: var(--m-mut);
}

.win--app .tb__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 21px;
  padding: 0 9px;
  background: var(--m-face);
  border: 0;
  border-radius: 0;
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
}

.win--app .tb__btn:hover {
  color: var(--m-ink);
  box-shadow: var(--m-raise);
}
.win--app .tb__btn:active {
  box-shadow: var(--m-sink);
}

/* an option button shows its diamond indicator */
.win--app .tb__btn[aria-pressed]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--m-field);
  box-shadow:
    inset 1px 1px 0 var(--m-lo),
    inset -1px -1px 0 var(--m-hi);
  transform: rotate(45deg);
}

.win--app .tb__btn[aria-pressed="true"] {
  background: color-mix(in oklch, var(--m-face) 90%, var(--m-lo));
  box-shadow: var(--m-sink);
  color: var(--m-ink);
}

.win--app .tb__btn[aria-pressed="true"]::before {
  background: var(--m-ink);
  box-shadow: none;
}

.win--app .win__status {
  min-height: 21px;
  padding: 0 8px;
  gap: 12px;
  border-top: 1px solid var(--m-lo);
  box-shadow: inset 0 1px 0 var(--m-hi);
  background: var(--m-face);
  color: var(--m-mut);
  font-family: var(--m-font);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

/* --- the list view ------------------------------------------------------- */

.win--app .lst {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.win--app .lst__head {
  padding: 4px 10px 3px;
  background: var(--m-face);
  border-bottom: 1px solid var(--m-lo);
  box-shadow: 0 1px 0 var(--m-hi);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.win--app .win__list {
  margin: 7px 8px 8px;
  padding: 2px;
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
}

.win--app .win__list li {
  border-bottom: 0;
}

.win--app .win__list a,
.win--app .win__list .win__row {
  padding: 4px 6px;
  color: var(--m-ink);
}

.win--app .win__list a:hover {
  background: var(--m-sel);
}
.win--app .win__list a:hover :is(.win__name, .win__sub, .lst__cell) {
  color: var(--m-sel-fg);
}

.win--app .win__name {
  font-family: var(--m-font);
  font-size: 12px;
  font-weight: 400;
}
.win--app .win__sub {
  margin-top: 1px;
  color: var(--m-mut);
  font-size: 11px;
  line-height: 1.35;
}
.win--app .lst__cell {
  font-family: var(--m-font);
  font-size: 11px;
  color: var(--m-mut);
}

.win--app .lst__empty,
.win--app .win__empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--m-mut);
  font-size: 12px;
}

.win--app .note {
  padding: 5px 6px;
}
.win--app .note__date {
  font-family: var(--m-font);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--m-mut);
}
.win--app .note__text {
  margin: 1px 0 0;
  font-family: var(--m-font);
  font-size: 12px;
  line-height: 1.4;
  color: var(--m-ink);
}

/* --- the readme and the profile ------------------------------------------ */

.win--app .readout,
.win--app .apppane {
  padding: 10px 12px 14px;
}

.win--app .readout__label {
  color: var(--m-mut);
  font-family: var(--m-font);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.win--app .readout__statement {
  font-family: var(--m-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--m-ink);
}
.win--app .readout__sub {
  margin-top: 5px;
  color: var(--m-ink);
  font-size: 12px;
  line-height: 1.45;
}

.win--app .readout__block {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--m-lo);
  box-shadow: inset 0 1px 0 var(--m-hi);
}

.win--app .readout__block--facts li {
  border-bottom: 1px solid var(--m-lo);
  box-shadow: 0 1px 0 var(--m-hi);
}
.win--app .readout__block--facts li:last-child {
  border-bottom: 0;
  box-shadow: none;
}

.win--app .readout__block--tags li {
  color: var(--m-ink);
}
.win--app .readout__block--tags li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--m-ink);
}

.win--app .prop {
  border-bottom: 1px solid var(--m-lo);
  box-shadow: 0 1px 0 var(--m-hi);
}
.win--app .prop:last-child {
  border-bottom: 0;
  box-shadow: none;
}
.win--app .prop__key {
  font-family: var(--m-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--m-ink);
}
.win--app .prop__val {
  font-family: var(--m-font);
  font-size: 12px;
  color: var(--m-ink);
}
.win--app .prop__val .ulink {
  color: var(--m-sel);
}

/* --- the clock, as a Motif panel ----------------------------------------- */

.win--app .win__clock {
  padding: 12px 12px 14px;
  gap: 6px;
}

.win--app .win__clock b {
  padding: 9px 8px;
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
  color: var(--m-ink);
  font-family: var(--m-mono);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem);
  font-weight: 500;
}

.win--app .win__clock span {
  color: var(--m-mut);
  font-family: var(--m-font);
  font-size: 11px;
}

/* --- the inventory ------------------------------------------------------- */

.win--app .inv {
  font-family: var(--m-font);
  font-size: 12px;
  color: var(--m-ink);
}

.win--app .inv__count {
  color: var(--m-mut);
  font-size: 11px;
}
.win--app .inv__count b {
  color: var(--m-ink);
}

.win--app .inv__chip {
  background: var(--m-face);
  border: 0;
  border-radius: 0;
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 11.5px;
}

.win--app .inv__chip[aria-pressed="true"] {
  background: color-mix(in oklch, var(--m-face) 90%, var(--m-lo));
  box-shadow: var(--m-sink);
}

.win--app .inv__search {
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 12px;
}

.win--app .inv__search::placeholder {
  color: var(--m-mut);
}

.win--app .inv__list {
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
}
.win--app .inv__row {
  color: var(--m-ink);
}
.win--app .inv__row:hover {
  background: var(--m-sel);
  color: var(--m-sel-fg);
}

.win--app .inv__empty {
  margin: 7px 8px 8px;
  padding: 12px;
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
  color: var(--m-mut);
}

.win--app .inv__empty b {
  color: var(--m-ink);
}

.win--app .inv__record {
  color: var(--m-ink);
}
.win--app .inv__kindtag {
  color: var(--m-mut);
  font-size: 11px;
}
.win--app .inv__title {
  font-family: var(--m-font);
  color: var(--m-ink);
}
.win--app .inv__facts dt {
  color: var(--m-mut);
  font-size: 11px;
}
.win--app .inv__facts dd {
  color: var(--m-ink);
}

.win--app .inv__story {
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
  padding: 8px;
  color: var(--m-ink);
  font-size: 12px;
}

.win--app .inv__hero {
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
}
.win--app .inv__thumb {
  background: var(--m-face);
  border: 0;
  box-shadow: var(--m-raise);
}
.win--app .inv__thumb[aria-pressed="true"] {
  box-shadow: var(--m-sink);
}
.win--app .inv__back {
  background: var(--m-face);
  border: 0;
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font-family: var(--m-font);
}
.win--app .inv__back:active {
  box-shadow: var(--m-sink);
}
.win--app .inv__related-title {
  color: var(--m-ink);
}
.win--app .inv__related a {
  color: var(--m-sel);
}
.win--app .inv__rel-kind {
  color: var(--m-mut);
}

/* --- the asset library: a notebook --------------------------------------- */

.win--app .lib {
  font-family: var(--m-font);
  font-size: 12px;
  color: var(--m-ink);
}
.win--app .lib__count {
  padding: 6px 8px 0;
  color: var(--m-mut);
  font-size: 11px;
}
.win--app .lib__count b {
  color: var(--m-ink);
}

.win--app .lib__body {
  border-top: 0;
}
.win--app .lib__pane {
  padding: 4px;
  gap: 2px;
  background: var(--m-face);
  border-right: 1px solid var(--m-lo);
  box-shadow: inset -1px 0 0 var(--m-hi);
}

.win--app .lib__tab {
  background: var(--m-face);
  border: 0;
  border-radius: 0;
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 11.5px;
}

.win--app .lib__tab[aria-selected="true"] {
  background: color-mix(in oklch, var(--m-face) 88%, var(--m-field));
  box-shadow:
    inset 1px 1px 0 var(--m-hi),
    inset -1px 0 0 var(--m-lo);
}

.win--app .lib__n {
  font-family: var(--m-font);
  color: var(--m-mut);
}

.win--app .lib__view {
  margin: 6px;
  padding: 8px 10px;
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
}

.win--app .lib__path {
  color: var(--m-mut);
  font-size: 11px;
}
.win--app .lib__item {
  color: var(--m-ink);
}
.win--app .lib__name {
  font-size: 12px;
}
.win--app .lib__meta,
.win--app .lib__id {
  font-family: var(--m-font);
  color: var(--m-mut);
  font-size: 11px;
}
.win--app .lib__none {
  color: var(--m-mut);
}

/* --- the calendar and the calculator ------------------------------------- */

.win--app .cal {
  padding: 10px 12px 12px;
  gap: 8px;
  font-family: var(--m-font);
  font-size: 12px;
  color: var(--m-ink);
}

.win--app .cal__nav,
.win--app .cal__today {
  min-height: 22px;
  background: var(--m-face);
  border: 0;
  border-radius: 0;
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font-family: var(--m-font);
}

.win--app .cal__nav:hover,
.win--app .cal__today:hover {
  color: var(--m-ink);
  box-shadow: var(--m-raise);
}

.win--app .cal__nav:active,
.win--app .cal__today:active {
  box-shadow: var(--m-sink);
}

.win--app .cal__label {
  color: var(--m-ink);
  font-weight: 700;
}
.win--app .cal__dow span {
  color: var(--m-mut);
  font-size: 10.5px;
}

.win--app .cal__grid {
  padding: 3px;
  gap: 1px;
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
}

.win--app .cal__day {
  color: var(--m-ink);
}
.win--app .cal__day--today {
  background: var(--m-sel);
  color: var(--m-sel-fg);
}
.win--app .cal__day--picked {
  outline: 1px solid var(--m-mut);
  outline-offset: -1px;
}
.win--app .cal__day--note::after {
  background: var(--m-sel);
}
.win--app .cal__day--today.cal__day--note::after {
  background: var(--m-sel-fg);
}

.win--app .cal__note {
  padding: 8px;
  background: var(--m-face);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
}

.win--app .cal__note-open {
  background: var(--m-face);
  border: 0;
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font-family: var(--m-font);
}
.win--app .cal__note-text {
  color: var(--m-ink);
}
.win--app .cal__foot {
  color: var(--m-mut);
  font-size: 11px;
}

.win--app .calc {
  padding: 12px;
  gap: 10px;
  font-family: var(--m-font);
}

.win--app .calc__display {
  margin: 0;
  padding: 8px 10px;
  background: var(--m-field);
  border: 1px solid var(--m-mid);
  box-shadow: var(--m-sink);
  color: var(--m-ink);
  font-family: var(--m-mono);
  font-size: 22px;
  text-align: right;
}

.win--app .calc__key {
  min-height: 36px;
  background: var(--m-face);
  border: 0;
  border-radius: 0;
  box-shadow: var(--m-raise);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 14px;
}

.win--app .calc__key:hover {
  background: var(--m-face);
  color: var(--m-ink);
  box-shadow: var(--m-raise);
}
.win--app .calc__key:active {
  background: color-mix(in oklch, var(--m-face) 92%, var(--m-lo));
  box-shadow: var(--m-sink);
}
.win--app .calc__key--fn,
.win--app .calc__key--op,
.win--app .calc__key--eq {
  background: var(--m-face);
  border: 0;
  color: var(--m-ink);
}

/* --- Motif scrollbars ----------------------------------------------------- */

.win--app :is(.win__body, .lib__view) {
  scrollbar-width: thin;
  scrollbar-color: var(--m-mid) var(--m-face);
}

.win--app .win__body::-webkit-scrollbar,
.win--app .lib__view::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.win--app .win__body::-webkit-scrollbar-track,
.win--app .lib__view::-webkit-scrollbar-track {
  background: var(--m-face);
  box-shadow:
    inset 1px 1px 0 var(--m-lo),
    inset -1px -1px 0 var(--m-hi);
}

.win--app .win__body::-webkit-scrollbar-thumb,
.win--app .lib__view::-webkit-scrollbar-thumb {
  background: var(--m-face);
  border: 0;
  box-shadow:
    inset 1px 1px 0 var(--m-hi),
    inset -1px -1px 0 var(--m-lo);
}

.win--app .win__body::-webkit-scrollbar-corner,
.win--app .lib__view::-webkit-scrollbar-corner {
  background: var(--m-face);
}

@media (max-width: 900px) {
  .ws-panel {
    left: 10px;
  }
  /* the desk's Toolchest gives way to the phone's chip */
  .ws-chest {
    display: none;
  }
  .ws-chip {
    display: inline-flex;
  }
  /* the viewport scrolls the page; the body must not be its own scroller */
  body.is-workstation {
    overflow: visible;
  }
  .ws {
    height: auto;
    display: block;
  }
  .ws-scene {
    position: static;
    overflow: visible;
    padding: 46px 10px 10px;
  }
  .ws-objects {
    position: static;
    width: auto;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
    overflow: visible;
  }
  .win {
    position: static;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin-top: 12px;
  }
  .win--filled {
    width: auto;
    height: auto;
  }
  /* in the stacked view a window is not a scroller and its bar is not a handle:
     both must pass the gesture through so the page scrolls from anywhere */
  .win__bar {
    cursor: default;
    touch-action: auto;
  }
  .win__body {
    overflow: visible;
    overscroll-behavior: auto;
  }
  /* the vertical strips lie flat in the stacked reading view */
  .inv {
    grid-template-columns: 1fr;
  }
  .inv__rail {
    border-bottom: 1px solid var(--border);
  }
  .inv__rail .inv__kinds {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .customize {
    grid-template-columns: 1fr;
  }
  .customize__strip {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
  /* filling the desk means nothing when the windows are stacked */
  .win__b[data-ws-fill] {
    display: none;
  }
  .win__grip {
    display: none;
  }
  .ws-snap {
    display: none;
  }
}

@media (max-width: 560px) {
  .ws-status__route {
    display: none;
  }
  .ws-surface__chip {
    display: none;
  }
  .ws-status [data-ws-open],
  .ws-status [data-ws-focuscell] {
    display: none;
  }
  /* A phone gets a stacked reading view, not a desk: the objects column stays
     out of the way and the command panel is the way to open an app. */
  .ws-objects {
    display: none;
  }
  .ws-chip {
    height: 38px;
  }
  .ws-panel {
    top: 54px;
  }
  .ws-nav {
    position: fixed;
    top: 54px;
    left: 10px;
    right: 10px;
    z-index: 55;
    display: flex;
    gap: 6px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ws-nav::-webkit-scrollbar {
    display: none;
  }
  .ws-nav__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    background: color-mix(in oklch, var(--ws-chrome) 92%, var(--ws-desk));
    border: 1px solid var(--ws-line);
    color: var(--ws-fg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
  }
  .ws-nav__link[aria-current="page"] {
    background: var(--ws-sand);
    border-color: var(--ws-sand);
    color: var(--ws-sand-ink);
  }
  /* clear the taller chip and the rail */
  .ws-scene {
    padding-top: 104px;
  }
}

/* ==========================================================================
   the boot sequence
   The home route's first visit in a session: PROM diagnostics and the kernel
   console print line by line, the login panel types its own entry, then the
   whole thing crossfades to the desk. The gate in Site.astro's head decides
   whether it runs; with it off every rule here is inert. `?boot=1` replays
   it, and Winterm's `boot` command replays it in place.
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  overflow: hidden;
  /* the SGI steel-blue field, as a monitor showed it; the dark desk gradient
     covers it from the graphical status on */
  background:
    radial-gradient(130% 100% at 82% 112%, var(--sb-vignette), transparent 62%),
    linear-gradient(
      160deg,
      var(--sb-bg-top) 0%,
      var(--sb-bg-mid) 52%,
      var(--sb-bg-bottom) 100%
    );
  color: var(--ws-fg);
}

html.boot-on .boot,
html.boot-leaving .boot {
  display: block;
}

/* Phase 1 is a PROM monitor, which had no colour of its own: black, with light
   text. The steel-blue field belongs to the maintenance menu that follows. */
.boot.boot--prom {
  background: #000;
}

html.boot-leaving .boot {
  opacity: 0;
  transition: opacity 950ms ease;
}

.boot--done {
  display: none !important;
}

/* while the sequence runs, nothing beneath it is visible or reachable */
html.boot-on body > :not(.boot) {
  visibility: hidden;
}

/* the opening screen: the IRIX system maintenance menu — WELCOME TO JUPITER.
   It keeps its 1994 composition; the field is refreshed to a deeper, more
   luminous Indy blue and the six entries are modern controls — soft flat
   surfaces, a proper focus ring, eased states — in place of the bevels. */
:root {
  --sb-bg-top: #cddcf4;
  --sb-bg-mid: #b1c8ec;
  --sb-bg-bottom: #8cabda;
  --sb-vignette: rgb(36 56 98 / 0.32);
  --sb-ink: #101010;
  --sb-ink-inverse: #ffffff;
  --sb-purple: #47126b;
  --sb-purple-shadow: rgb(112 120 142 / 0.5);
  --sb-yellow: #ffd400;
  --sb-select: #2f56b0;
  --sb-row: rgb(255 255 255 / 0.34);
  --sb-row-picked: rgb(255 255 255 / 0.7);
  --sb-tile: rgb(255 255 255 / 0.55);
  --sb-tile-bright: rgb(255 255 255 / 0.92);
  --sb-tile-border: rgb(255 255 255 / 0.85);
  --sb-icon-ink: #333333;
  --sb-icon-metal: #b3b3b3;
  --sb-icon-light: #e8e8e8;
  --sb-icon-pale: #dfe3ee;
  --sb-icon-charcoal: #2b2b2b;
  --sb-icon-red: #c02a2a;
  --sb-icon-red-dark: #7c2a24;
  --sb-icon-amber: #8a7326;
  --sb-icon-green: #35c23f;
  --sb-icon-yellow: #f2d94e;
  --sb-icon-blue: #c9d3e2;
  --sb-icon-white: #fdfdfd;
  --sb-serif: Georgia, "Times New Roman", "Liberation Serif", serif;
}

.boot__start {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8vh 10vw 5vh;
  /* the screen is presentation: a click or key still skips via the overlay */
  pointer-events: none;
  transition: opacity 600ms ease;
}

/* The PROM holds the screen alone, then the menu, then neither: the light field
   belongs to those two phases and to nothing after them. */
.boot__start {
  opacity: 0;
}

/* Only the menu's own phase shows it. The PROM has the screen to itself on
   black, and nothing of the maintenance menu should be on it. */
.boot--menu .boot__start {
  opacity: 1;
}

.boot__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(12px, 1.7vh, 20px);
  /* a button column, not a page-wide list — the 1994 block stays top-left */
  max-width: min(480px, 100%);
}

.boot__mitem {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px 8px 8px;
  background: var(--sb-row);
  border: 1px solid rgb(255 255 255 / 0.62);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(31 51 92 / 0.1);
  color: var(--sb-ink);
  font-family: var(--sb-serif);
  font-size: clamp(1.05rem, 1.1vw + 0.55rem, 1.5rem);
  line-height: 1.1;
}

/* the autoboot: Start System is picked, pressed, then the console takes over.
   The states ease rather than snap, and the press lands the modern way —
   ring, fill, a one-pixel nudge. boot.js hands over to the console at 3400 ms,
   a beat after this animation settles. */
.boot__mitem:first-child {
  animation: boot-pick 2000ms ease 300ms both;
}
.boot__mitem:first-child .boot__micon {
  animation: boot-pick-tile 2000ms ease 300ms both;
}

@keyframes boot-pick {
  0%,
  22% {
    background: var(--sb-row);
    border-color: rgb(255 255 255 / 0.62);
    color: var(--sb-ink);
    box-shadow:
      0 0 0 0 rgb(47 86 176 / 0),
      0 0 0 0 rgb(47 86 176 / 0),
      0 1px 2px rgb(31 51 92 / 0.1);
    transform: translateY(0);
  }
  36%,
  70% {
    background: var(--sb-row-picked);
    border-color: rgb(255 255 255 / 0.95);
    color: var(--sb-ink);
    box-shadow:
      0 0 0 2px var(--sb-select),
      0 0 0 6px rgb(47 86 176 / 0.16),
      0 6px 14px rgb(31 51 92 / 0.16);
    transform: translateY(0);
  }
  84%,
  100% {
    background: var(--sb-select);
    border-color: var(--sb-select);
    color: var(--sb-ink-inverse);
    box-shadow:
      0 0 0 2px var(--sb-select),
      0 0 0 6px rgb(47 86 176 / 0.1),
      0 10px 20px rgb(31 51 92 / 0.26);
    transform: translateY(1px);
  }
}

@keyframes boot-pick-tile {
  0%,
  22% {
    background: var(--sb-tile);
  }
  36%,
  100% {
    background: var(--sb-tile-bright);
  }
}

.boot__micon {
  flex: none;
  width: clamp(38px, 4.8vh, 52px);
  height: clamp(38px, 4.8vh, 52px);
  display: grid;
  place-items: center;
  background: var(--sb-tile);
  border: 1px solid var(--sb-tile-border);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(31 51 92 / 0.08);
}

/* the pictograms: strokes first, then the fills, so a shape can carry both */
.boot__micon .bi-ink {
  fill: none;
  stroke: var(--sb-icon-ink);
  stroke-width: 1.6;
}
.boot__micon .bi-out {
  fill: none;
  stroke: var(--sb-icon-ink);
  stroke-width: 1.2;
}
.boot__micon .bi-txt {
  fill: none;
  stroke: var(--sb-icon-ink);
  stroke-width: 1;
}
.boot__micon .bi-spoke {
  fill: none;
  stroke: var(--sb-icon-ink);
  stroke-width: 1.6;
}
.boot__micon .bi-arrow {
  fill: none;
  stroke: var(--sb-icon-red);
  stroke-width: 1.6;
}
.boot__micon .bi-metal {
  fill: var(--sb-icon-metal);
}
.boot__micon .bi-light {
  fill: var(--sb-icon-light);
}
.boot__micon .bi-pale {
  fill: var(--sb-icon-pale);
}
.boot__micon .bi-charcoal {
  fill: var(--sb-icon-charcoal);
}
.boot__micon .bi-red {
  fill: var(--sb-icon-red);
}
.boot__micon .bi-red-dark {
  fill: var(--sb-icon-red-dark);
}
.boot__micon .bi-amber {
  fill: var(--sb-icon-amber);
}
.boot__micon .bi-green {
  fill: var(--sb-icon-green);
}
.boot__micon .bi-yellow {
  fill: var(--sb-icon-yellow);
}
.boot__micon .bi-blue {
  fill: var(--sb-icon-blue);
}
.boot__micon .bi-white {
  fill: var(--sb-icon-white);
}

.boot__base {
  display: grid;
  gap: 3.4vh;
}

.boot__welcome {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* the greeting and the wordmark sit against the right edge, above the
     plate, so the whole signature block reads as one right-aligned column */
  justify-content: flex-end;
  gap: 0.4em 0.9em;
  color: var(--sb-purple);
}

.boot__welc {
  font-family: var(--sb-serif);
  font-size: clamp(0.72rem, 1.1vw + 0.3rem, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  /* sit the greeting against the script's baseline, not the swash below it */
  margin-bottom: clamp(16px, 4vw, 58px);
}

/* the supplied brush-script wordmark, keyed out of its flattened art; the grey
   drop shadow is the one measured from that art (offset right and slightly
   down), scaled with the mark */
.boot__machine {
  display: block;
  width: clamp(280px, 36vw, 640px);
  height: auto;
  filter: drop-shadow(
    clamp(6px, 0.8vw, 12px) clamp(3px, 0.45vw, 7px) 0 var(--sb-purple-shadow)
  );
}

/* the plate under the wordmark. It used to carry SGI's name; that is their
   trademark and this is somebody's website, not their product, so it says
   what the thing actually is. */
.boot__plate {
  margin: 0;
  text-align: right;
  font-family: var(--sb-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw + 0.4rem, 1.4rem);
  color: var(--sb-yellow);
}

/* --- phase 1: the PROM ---------------------------------------------------
   A monitor's own banner, before anything else. Brief by design: three lines
   on the field, then the System Maintenance Menu takes over. */

.boot__prom {
  position: absolute;
  inset: 0;
  /* Above .boot__start, which carries the light field the text sits on and
     comes later in the markup at the same index would otherwise cover it. */
  z-index: 4;
  display: grid;
  /* top left, the way a PROM monitor prints itself: no cursor, no centring */
  align-content: start;
  justify-items: start;
  gap: 3px;
  padding: 26px 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.boot--prom .boot__prom {
  opacity: 1;
}

.boot__pline {
  font-family: "SGI Screen", var(--font-mono);
  font-size: clamp(0.75rem, 0.55vw + 0.62rem, 1rem);
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-align: left;
  color: rgb(255 255 255 / 0.72);
}

.boot__pline--banner {
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

/* --- phase 3: the graphical status ---------------------------------------
   The SGI mark turning, the meter under it, and the stage it has reached.
   Sits over the Indigo current, which is already running behind it. */

.boot__load {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 14px;
  /* the bottom padding keeps the meter clear of the skip button, which is
     pinned to the same corner */
  padding: 24px 24px 76px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.boot--load .boot__load {
  opacity: 1;
}

.boot__stage {
  margin: 0;
  min-height: 1.5em;
  font-family: "SGI Screen", var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--ws-sand);
}

/* the meter: a beveled trough with a phosphor fill, not a progress bar */
.boot__meter {
  width: min(360px, 74vw);
  height: 12px;
  padding: 2px;
  background: var(--ws-chrome);
  box-shadow:
    inset 1px 1px 0 var(--ws-line),
    inset -1px -1px 0 rgb(0 0 0 / 0.6);
}

.boot__meter-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--ws-signal), var(--ws-sand));
  transition: width 420ms ease;
}

.boot__meterpct {
  margin: 0;
  font-family: "SGI Screen", var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ws-muted);
}

/* (the opening screen lives above, with the phase rules between) */

.boot__hint {
  position: absolute;
  left: 24px;
  bottom: 16px;
  margin: 0;
  color: var(--ws-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  opacity: 0;
  animation: boot-hint 500ms ease 1.8s forwards;
}

.boot__desk {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 480ms ease;
  background: var(--ws-desk);
}

/* The colour in the field is a wash laid over a neutral ground. While the
   machine is still starting, the ground is all there is; the last thing before
   the login is this wash fading up through it, matching the canvas. */
.boot__desk::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      150% 120% at 16% -14%,
      color-mix(in oklch, var(--ws-signal) 12%, transparent),
      transparent 58%
    ),
    radial-gradient(
      110% 110% at 94% 116%,
      color-mix(in oklch, var(--ws-chrome) 66%, transparent),
      transparent 56%
    );
  /* A soft tint with no edge, so it fades with the front instead of being cut
     to it. --reveal defaults to 1: if the boot script never runs, the wash is
     simply there. */
  opacity: var(--reveal, 1);
}

/* The dark field and the Indigo current are the overlay's resting state: they
   hold from phase 3, through the bare beat in phase 4, to the crossfade. Phases
   1 and 2 take the screen away from them. */
.boot__desk {
  opacity: 1;
}

.boot--prom .boot__desk,
.boot--menu .boot__desk {
  opacity: 0;
}

.boot__login {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease 80ms;
}

.boot--login .boot__login {
  opacity: 1;
  pointer-events: auto;
}

/* the login panel is a window, but it sits still */
.boot__login {
  z-index: 4;
}

/* --- clogin ----------------------------------------------------------------
   Two areas, as the man page describes: the accounts as selectable icons
   across the top, the login name and the Login button underneath. */

.boot__panelbody {
  display: grid;
  gap: 18px;
}

/* the top area: the accounts, in the sunken well the reference draws */
.boot__well {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 240px;
  padding: 18px;
  overflow: auto;
  background: color-mix(in oklch, var(--ws-desk) 78%, var(--ws-chrome));
  border: 1px solid color-mix(in oklch, var(--ws-fg) 16%, transparent);
  box-shadow:
    inset 1px 1px 0 oklch(0% 0 0 / 0.55),
    inset -1px -1px 0 color-mix(in oklch, var(--ws-fg) 10%, transparent);
}

.boot__face {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 104px;
  padding: 10px 6px 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--ws-fg);
  font: inherit;
  cursor: pointer;
}
.boot__face:hover,
.boot__face:focus-visible,
.boot__face[data-picked] {
  border-color: color-mix(in oklch, var(--ws-signal) 55%, transparent);
  background: color-mix(in oklch, var(--ws-signal) 12%, transparent);
  outline: none;
}

.boot__faceicon {
  width: 64px;
  height: 64px;
}
/* the generic account icon: a monitor, its stand, and the tower beside it,
   drawn in outline the way these login managers drew them */
.boot__facemon,
.boot__facebox {
  fill: color-mix(in oklch, var(--ws-chrome) 80%, var(--ws-fg));
  stroke: var(--ws-fg);
  stroke-width: 1.5;
}
.boot__facestem {
  fill: var(--ws-fg);
}
.boot__faceslot {
  fill: none;
  stroke: color-mix(in oklch, var(--ws-fg) 55%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.boot__facelabel {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ws-fg);
}

/* the name and password rows: the bold label and the field, which stays the
   light element the reference makes it */
.boot__fields {
  display: grid;
  gap: 10px;
}

.boot__entry {
  display: flex;
  align-items: center;
  gap: 12px;
}

.boot__key {
  flex: none;
  min-width: 5.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ws-fg);
}

.boot__value {
  flex: 0 1 360px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  background: color-mix(in oklch, var(--ws-sand) 62%, var(--ws-chrome));
  border: 1px solid color-mix(in oklch, var(--ws-sand-ink) 60%, transparent);
  box-shadow: inset 1px 1px 0 oklch(0% 0 0 / 0.35);
  color: var(--ws-sand-ink);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.boot__val {
  white-space: pre;
}

/* the foot: the wordmark where IRIS sat, and the two buttons */
.boot__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

.boot__wordmark {
  margin: 0;
  font-family: "SGI", var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: 0.06em;
  line-height: 1;
  color: color-mix(in oklch, var(--ws-fg) 34%, transparent);
}

.boot__buttons {
  display: flex;
  gap: 10px;
}

.boot__go {
  min-height: 34px;
  padding: 5px 20px;
  background: color-mix(in oklch, var(--ws-chrome) 88%, var(--ws-fg));
  border: 1px solid color-mix(in oklch, var(--ws-fg) 22%, transparent);
  box-shadow:
    inset 1px 1px 0 color-mix(in oklch, var(--ws-fg) 22%, transparent),
    inset -1px -1px 0 oklch(0% 0 0 / 0.6);
  color: var(--ws-fg);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
}

.boot__go:hover,
.boot__go:focus-visible {
  border-color: var(--ws-sand);
  color: var(--ws-sand);
  outline: none;
}

.boot__go:active {
  box-shadow:
    inset -1px -1px 0 color-mix(in oklch, var(--ws-fg) 22%, transparent),
    inset 1px 1px 0 oklch(0% 0 0 / 0.6);
}

.boot__panel {
  position: relative;
  left: auto;
  top: auto;
  width: min(720px, calc(100vw - 48px));
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
}

.boot__panel .win__body {
  overflow: visible;
  background: color-mix(in oklch, var(--ws-chrome) 92%, var(--ws-desk));
  color: var(--ws-fg);
  padding: 26px 28px 22px;
}

.boot__caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  background: var(--ws-sand-ink);
  animation: boot-blink 1.05s steps(1) infinite;
}

.boot__caret[hidden] {
  display: none;
}

.boot__status {
  min-height: 1.3em;
  margin: -6px 0 0;
  color: var(--ws-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.boot__skip {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 4;
  padding: 7px 12px;
  background: color-mix(in oklch, var(--ws-chrome) 88%, transparent);
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.boot__skip:hover,
.boot__skip:focus-visible {
  border-color: var(--ws-sand);
  color: var(--ws-sand);
}

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

@keyframes boot-hint {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .boot__panel .win__body {
    padding: 16px 14px 18px;
  }
  .boot__well {
    min-height: 150px;
    padding: 12px 10px;
  }
  .boot__face {
    width: 84px;
  }
  .boot__faceicon {
    width: 48px;
    height: 48px;
  }
  .boot__entry {
    flex-wrap: wrap;
    gap: 8px;
  }
  .boot__wordmark {
    font-size: 1.5rem;
  }
  /* stack the greeting over the wordmark rather than squeezing the row,
     keeping the block against the same right edge as on a wide screen */
  .boot__welcome {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .boot__welc {
    margin-bottom: 0;
  }
  .boot__machine {
    width: min(76vw, 360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot__caret {
    animation: none;
  }
  .boot__desk,
  .boot__load,
  .boot__login {
    transition-duration: 1ms;
  }
  .boot__hint {
    animation-duration: 1ms;
    animation-delay: 0s;
  }
}

/* ==========================================================================
   IRIX Interactive Desktop conformance
   The scheme (documented symbolic names mapped to this palette), the pointer
   set, the icon states, the window menu, the dialogs and the Help system.
   ========================================================================== */

/* The scheme: applications reference these symbolic names, never raw
   colours, so the palette stays in one place. */
:root {
  --sgi-basic-background: var(--ws-chrome);
  --sgi-text-foreground: var(--ws-fg);
  --sgi-text-background: var(--ws-desk);
  --sgi-text-field-background: var(--ws-desk);
  --sgi-read-only-background: color-mix(
    in oklch,
    var(--ws-chrome) 70%,
    var(--ws-fg)
  );
  --sgi-text-selected-background: oklch(45% 0.09 250);
  --sgi-text-selected-foreground: oklch(99% 0.002 250);
  --sgi-scrolled-list-background: var(--ws-desk);
  --sgi-scrollbar-trough: var(--ws-chrome);
  --sgi-scrollbar-control: var(--ws-chrome);
  --sgi-button-background: var(--ws-chrome);
  --sgi-select-fill: oklch(45% 0.09 250);
  --sgi-check-color: oklch(54% 0.18 25);
  --sgi-radio-color: oklch(54% 0.15 255);
  --sgi-indicator-background: var(--ws-desk);
  --sgi-warning-color: oklch(78% 0.14 80);
  --sgi-error-color: oklch(60% 0.2 25);
  --sgi-information-color: oklch(66% 0.12 250);
  --sgi-wm-active-background: var(--ws-sand);
  --sgi-wm-active-foreground: var(--ws-sand-ink);
  --sgi-alt-background-4: #729c9c;
  --sgi-alt-background-5: #5680ab;
  --sgi-alt-background-6: #b6b6aa;
  /* The icon colour, dynamic through the documented states. */
  --sgi-icon: oklch(78% 0.012 95);
  --sgi-icon-locate: oklch(98% 0.004 95);
  --sgi-icon-selected: oklch(87% 0.15 96);
  --sgi-icon-selected-dim: oklch(74% 0.11 96);
  --sgi-icon-ghost: oklch(48% 0.008 95);
  --sgi-icon-drop: oklch(52% 0.13 258);
  --sgi-icon-accent: oklch(62% 0.09 235);
  --sgi-icon-line: oklch(16% 0.01 95);
  --sgi-icon-shadow: color-mix(in oklch, var(--ws-desk) 74%, transparent);
  /* The pointer set: the IRIX general-purpose arrow is red with a white
     outline, so it stays visible on user-customised backgrounds. */
  --sgi-pointer-arrow:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 1l7 19 2.2-7.2L18 10z' fill='%23e01b1b' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E")
      2 1,
    default;
  --sgi-pointer-menu:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M22 1l-7 19-2.2-7.2L6 10z' fill='%23e01b1b' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E")
      2 1,
    default;
  --sgi-pointer-help:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 8.2a2.8 2.8 0 1 1 4.1 2.5c-.9.5-1.4 1-1.4 2v.7' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3Cpath d='M9.5 8.2a2.8 2.8 0 1 1 4.1 2.5c-.9.5-1.4 1-1.4 2v.7' fill='none' stroke='%23e01b1b' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%23ffffff' stroke='%23e01b1b' stroke-width='1'/%3E%3C/svg%3E")
      8 4,
    help;
}

/* --- the pointer set ------------------------------------------------------ */

.ws,
.ws
  :is(
    a,
    button,
    [role="button"],
    summary,
    label,
    .obj,
    .win__bar,
    .m-bar__btn,
    .m-pop__it
  ) {
  cursor: var(--sgi-pointer-arrow);
}

/* Explicit focus within a window: the I-beam belongs to text-editing mode
   only, never to a pointer passing over text. */
.ws :is(input, textarea, [contenteditable="true"]) {
  cursor: text;
}

body.ws-menu-open .ws,
body.ws-menu-open .ws * {
  cursor: var(--sgi-pointer-menu);
}

body.help-mode .ws,
body.help-mode .ws * {
  cursor: var(--sgi-pointer-help);
}

body.wm-moving .win.wm-moving,
body.wm-moving .win.wm-moving * {
  cursor: move;
}

body.wm-sizing .win.wm-sizing,
body.wm-sizing .win.wm-sizing * {
  cursor: nwse-resize;
}

body.ws-busy .ws,
body.ws-busy .ws * {
  cursor: progress;
}

/* --- the icon: badge + generic component, six states ---------------------- */

.sg-icon {
  overflow: visible;
}
.sg-icon .ic-fill {
  fill: var(--sgi-icon);
}
.sg-icon .ic-accent {
  fill: var(--sgi-icon-accent);
}
.sg-icon .ic-line {
  fill: none;
  stroke: var(--sgi-icon-line);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.sg-icon .ic-shadow {
  fill: var(--sgi-icon-shadow);
}
.sg-icon .ic-badge {
  color: var(--sgi-icon);
}

/* The magic carpet: horizontal at rest, vertical while the app is running. */
.obj[data-running] .ic-carpet-h,
.obj:not([data-running]) .ic-carpet-v {
  display: none;
}

.obj:hover .ic-fill,
.obj:focus-visible .ic-fill {
  fill: var(--sgi-icon-locate);
}
.obj:hover .ic-badge,
.obj:focus-visible .ic-badge {
  color: var(--sgi-icon-locate);
}

.obj.is-selected .ic-fill {
  fill: var(--sgi-icon-selected);
}
.obj.is-selected .ic-badge {
  color: var(--sgi-icon-selected);
}
.obj.is-selected .ic-accent {
  fill: color-mix(
    in oklch,
    var(--sgi-icon-selected) 52%,
    var(--sgi-icon-accent)
  );
}
.obj.is-selected.is-dim .ic-fill {
  fill: var(--sgi-icon-selected-dim);
}
.obj.is-selected.is-dim .ic-badge {
  color: var(--sgi-icon-selected-dim);
}
.obj.is-selected.is-dim .ic-accent {
  fill: color-mix(
    in oklch,
    var(--sgi-icon-selected-dim) 52%,
    var(--sgi-icon-accent)
  );
}
.obj[data-drop] .ic-fill {
  fill: var(--sgi-icon-drop);
}

/* --- the window menu and the menu bars ------------------------------------ */

.ws:not(.ws-ready) [data-ws-wmmenu] {
  display: none;
}

.ws-menu--wm {
  min-width: 224px;
}

.ws-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ws-menu__lbl {
  flex: 1 1 auto;
}
.ws-menu__acc {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  opacity: 0.72;
}

.m-pop__it {
  display: flex;
  align-items: center;
}
.m-pop__acc {
  flex: none;
  margin-left: 18px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  opacity: 0.75;
}
.m-bar__lbl {
  display: inline-block;
}

.ws-menu__item.is-disabled,
.m-pop__it.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* --- minimised windows: an image and a twelve-character label ------------- */

.ws-rest {
  gap: 5px;
  padding: 0 6px;
}
.ws-rest__img {
  display: inline-flex;
  color: var(--ws-muted);
}
.ws-rest__lbl {
  max-width: 9ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- the dialogs ---------------------------------------------------------- */

.sg-dialog {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 120;
  min-width: 320px;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--ws-chrome);
  border: 1px solid var(--ws-line);
  box-shadow: 0 24px 60px -28px oklch(0% 0 0 / 0.85);
  color: var(--ws-fg);
}

.sg-dialog__bar {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  background: var(--sgi-wm-active-background);
  color: var(--sgi-wm-active-foreground);
}

.sg-dialog__title {
  font-family: "SGI", var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
}

.sg-dialog__body {
  display: flex;
  gap: 12px;
  padding: 16px 16px 8px;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.sg-dialog__icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--sgi-indicator-background);
  border: 1px solid var(--ws-line);
  font-family: "SGI", var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
}

.sg-dialog__icon[data-type="information"]::before {
  content: "i";
  color: var(--sgi-information-color);
}
.sg-dialog__icon[data-type="error"]::before {
  content: "!";
  color: var(--sgi-error-color);
}
.sg-dialog__icon[data-type="warning"]::before {
  content: "!";
  color: var(--sgi-warning-color);
}
.sg-dialog__icon[data-type="question"]::before {
  content: "?";
  color: var(--sgi-information-color);
}
.sg-dialog__icon[data-type="working"]::before {
  content: "\2026";
}
.sg-dialog__icon[data-type="prompt"]::before {
  content: ">";
}

.sg-dialog__msg {
  min-width: 0;
}
.sg-dialog__msg b {
  font-weight: 600;
}

.sg-dialog__field {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 5px 7px;
  background: var(--sgi-text-field-background);
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  font: inherit;
  font-size: 0.8125rem;
}

.sg-dialog__resp {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
}

.sg-btn {
  padding: 4px 14px;
  background: var(--sgi-button-background);
  border: 1px solid var(--ws-line);
  color: var(--ws-fg);
  font: inherit;
  font-size: 0.8125rem;
}

.sg-btn:hover {
  border-color: var(--ws-sand);
  color: var(--ws-sand);
}
.sg-btn--default {
  border-color: var(--ws-sand);
}

/* --- the Help system ------------------------------------------------------ */

.sg-help {
  position: fixed;
  right: 172px;
  top: 88px;
  z-index: 110;
  width: min(340px, calc(100vw - 32px));
  background: var(--ws-chrome);
  border: 1px solid var(--ws-line);
  box-shadow: 0 22px 50px -26px oklch(0% 0 0 / 0.85);
  color: var(--ws-fg);
}

.sg-help__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 4px 0 10px;
  background: var(--sgi-wm-active-background);
  color: var(--sgi-wm-active-foreground);
}

.sg-help__title {
  font-family: "SGI", var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
}

.sg-help__close {
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid transparent;
  color: inherit;
}

.sg-help__close:hover {
  border-color: currentColor;
}

.sg-help__body {
  padding: 12px 14px 16px;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.sg-help__lede {
  margin: 0 0 8px;
  color: var(--ws-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sg-help__tasks {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.sg-help__tasks b {
  display: block;
  font-weight: 600;
}
.sg-help__tasks span {
  color: var(--ws-muted);
}

.sg-help__index {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.sg-help__link {
  display: block;
  width: 100%;
  padding: 4px 6px;
  background: none;
  border: 0;
  color: var(--ws-fg);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
}

.sg-help__link:hover {
  background: var(--ws-signal);
  color: var(--ws-desk);
}

.sg-help__keys {
  width: 100%;
  border-collapse: collapse;
}
.sg-help__keys td {
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ws-line) 60%, transparent);
}
.sg-help__keys td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ws-muted);
}

/* --- scrollbars: the slider carries a grip; when there is nothing to scroll
       the slider leaves while the bar itself stays --------------------------- */

.win--app .win__body::-webkit-scrollbar-thumb,
.win--app .lib__view::-webkit-scrollbar-thumb {
  background-image:
    linear-gradient(var(--m-lo), var(--m-lo)),
    linear-gradient(var(--m-lo), var(--m-lo)),
    linear-gradient(var(--m-lo), var(--m-lo));
  background-size: 8px 1px;
  background-position:
    center calc(50% - 4px),
    center,
    center calc(50% + 4px);
  background-repeat: no-repeat;
}

.win__body.no-slider {
  scrollbar-color: transparent var(--m-face);
}
.win__body.no-slider::-webkit-scrollbar-thumb {
  background: transparent;
  background-image: none;
  box-shadow: none;
}

/* --- text selection: the scheme's selected-text pair ---------------------- */

.ws ::selection {
  background: var(--sgi-text-selected-background);
  color: var(--sgi-text-selected-foreground);
}

/* --- the IRIX control states ----------------------------------------------
   A triangle marks the chosen option in a mutually exclusive group; an
   independent toggle carries the red check. Both ride the signal fill. */

.sv__btn[data-sv="mins"][aria-pressed="true"]::before,
.sv__btn[data-sv="mode"][aria-pressed="true"]::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--ws-desk);
  vertical-align: -1px;
}

.sv__btn[data-sv="lock"][aria-pressed="true"]::before {
  content: "\2713";
  margin-right: 5px;
  color: var(--sgi-check-color);
  font-weight: 700;
}

/* --- the login screen's geometry: the Indigo current ----------------------
   The canvas sits under the login panel and fades in with the login phase;
   boot.js flows a wireframe ribbon of light across it — the PlayStation's
   drifting wave backgrounds in the station's steel blue — or one static
   frame under prefers-reduced-motion. */

.boot__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transition: opacity 700ms ease 140ms;
}

.boot--prom .boot__bg,
.boot--menu .boot__bg {
  opacity: 0;
}

/* the panel keeps its place above the current */
.boot__panel {
  z-index: 1;
}

/* --- full screen -----------------------------------------------------------
   A standing control in the Toolchest's panel, and a one-off card after the
   boot has finished. The card is a Motif dialog because that is what the desk
   would have put on the screen; it sits above the status strip and clears the
   object rail. */

.ws-fs {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ws-status-h) + 16px);
  z-index: 30;
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.ws-fs[hidden] {
  display: none;
}

.ws-fs__panel {
  padding: 12px 14px;
  border: 1px solid var(--ws-line);
  border-radius: 2px;
  background: var(--m-face, var(--ws-chrome));
  color: var(--ws-fg);
  font-family: var(--m-font, Helvetica, "Nimbus Sans", Arial, sans-serif);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.42);
  pointer-events: auto;
}

.ws-fs__text {
  margin: 0 0 10px;
  color: var(--m-ink, var(--ws-fg));
}

.ws-fs__acts {
  display: flex;
  gap: 8px;
}

.ws-fs__go,
.ws-fs__no {
  padding: 4px 11px;
  border: 0;
  border-radius: 2px;
  background: var(--m-mid, var(--ws-chrome));
  color: var(--m-ink, var(--ws-fg));
  font-family: inherit;
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: var(
    --m-raise,
    inset -1px -1px 0 rgb(0 0 0 / 0.5),
    inset 1px 1px 0 rgb(255 255 255 / 0.16)
  );
}

.ws-fs__go {
  background: var(--ws-signal);
  color: var(--ws-desk);
}

.ws-fs__go:hover {
  filter: brightness(1.12);
}

.ws-fs__no {
  background: transparent;
  color: var(--m-mut, var(--ws-muted));
}

.ws-fs__go:active,
.ws-fs__no:active {
  box-shadow: var(--m-sink, inset 1px 1px 0 rgb(0 0 0 / 0.5));
}

/* Once full screen is on, the card has nothing left to suggest. */
.ws-fs[data-ws-fs-in] {
  display: none;
}

/* --- the IRIX demos application -------------------------------------------
   One window per vendored SGI program under /irix/apps/. The frame is only
   inserted when the window is first opened, because the seventeen builds
   total 35MB of WebAssembly; see components/desktop/Demo.astro. Interiors are
   Motif, like the other application windows.
   ------------------------------------------------------------------------- */

.dmo {
  position: relative;
  /* A column flexbox, not a percentage height: the floating layout gives the
     window a definite height, the stacked one gives .dmo a min-height, and
     `height: 100%` on the frame resolves against neither. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  overflow: hidden;
}

.dmo__frame {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  overflow: hidden;
  background: #000;
}

.dmo__frame[hidden] {
  display: none;
}

.dmo__idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  background: #000;
  color: var(--m-mut);
  font-family: var(--m-mono);
  font-size: 12px;
}

.dmo__idle[hidden] {
  display: none;
}

/* The controls strip under the picture: Restart, source, and what the
   program listens for. Motif buttons, not the desktop's toolbar buttons. */
.dmo__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-top: 1px solid var(--m-lo);
  box-shadow: inset 0 1px 0 var(--m-hi);
  background: var(--m-face);
  color: var(--m-mut);
  font-family: var(--m-font);
  font-size: 11px;
}

.dmo__btn {
  padding: 2px 9px;
  border: 0;
  border-radius: 2px;
  background: var(--m-mid);
  color: var(--m-ink);
  font-family: var(--m-font);
  font-size: 11px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--m-raise);
}

.dmo__btn:hover {
  background: var(--m-hi);
}

.dmo__btn:active {
  box-shadow: var(--m-sink);
}

.dmo__note {
  margin-left: auto;
  font-family: var(--m-mono);
  font-size: 11px;
  text-align: right;
}

/* The provenance window shares the Motif face. */
.dmo__doc {
  padding: 12px 14px;
}

.dmo__doc p {
  margin: 0 0 10px;
}

.dmo__doc p:last-child {
  margin-bottom: 0;
}

.dmo__doc a {
  color: var(--m-sel);
}

/* A body that is one element's whole window: no scroll, no padding. */
.win--bare .win__body {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Stacked rather than floating, the window's own height does not apply, so a
   running demo would collapse to a strip. Give it a usable box. */
@media (max-width: 900px) {
  .win--bare .dmo {
    min-height: 58vh;
  }
}

/* the PROM lines arrive one at a time, the way a monitor prints them */
.boot__pline {
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.boot__pline.is-shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .boot__pline {
    transition: none;
  }
}