/* ============================================================================
   maxhemmerich.com — css/style.css
   Base reset + the Windows 95 shell zone (taskbar, Start button + Start menu,
   window chrome / title bar, desktop icon grid, folder chrome, 404 dialog).

   Zone rule: authentic 95 grey and navy; no neon here.
   Every colour, bevel, size and font is a var(--token) declared in
   css/tokens.css, with one documented exception: the alpha of the W-57 veil,
   because tokens.css ships no token that carries an alpha channel. That single
   value is named in a var() fallback in the veil rule below, so declaring
   --scrim in css/tokens.css makes the literal dead. No other hex value and no
   other raw rgb() in this file: that is what keeps the fidelity probes
   (W-07…W-21) decidable.

   The @import below is the safety net for pages that link only this file
   (projects/*.html link ../css/style.css and nothing else): without it every
   var(--token) on those pages is undefined and resolves to nothing.
   ========================================================================= */

@import url("tokens.css");

/* ------------------------------------------------------------------ 1. reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The markup's own toggle always wins over any display rule below. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  /* room for the fixed taskbar (W-07) */
  padding-bottom: var(--taskbar-height);
  color: var(--shell-black);
  background-color: var(--shell-title-a); /* desktop navy behind the wallpaper */
  background-image: url("../assets/wallpaper.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1.4;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* One visible ring on everything focused (shell zone, and W-38 for the rest). */
:focus,
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Pixel art stays crisp at integer multiples. */
.pixel-icon {
  image-rendering: pixelated;
}

/* -------------------------------------------------------- 2. skip link chrome */

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 1200;
  padding: 6px 10px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: var(--shell-border);
  border-radius: var(--shell-radius);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* ------------------------------------------------------------------ 3. desktop */

.desktop,
.folder-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px;
}

/* W-57: the veil. Every surface that would otherwise let text sit straight on
   the wallpaper — the index desktop, a folder page, the 404 shell — paints its
   own translucent navy over it, so a text backdrop is a measured surface and
   never the raw image.

   SHAPE: this is the wrapper's own background, not a fixed pseudo-element,
   because the layer has to be an ELEMENT that covers the wallpaper's box. A
   viewport-sized layer covers only a fifth of the body box (the body box is the
   whole document), and a pseudo-element has no element for a hit test to return.

   VALUE: a documented literal, on the same terms rave.css already uses for the
   band's sizes and its pulse opacity — plan §3 TOKENS declares no token that
   carries alpha, and both color-mix() and relative-colour syntax compute to
   `color(srgb …)`, which a legacy rgba() reading cannot measure. The colour is
   var(--shell-title-a) (#000080) at 62%. REQUESTED TOKEN: --scrim, declared in
   css/tokens.css — the fallback below is where it would land. */
.desktop-shell,
.dialog-shell,
.folder-shell {
  background-color: var(--scrim, rgba(0, 0, 128, 0.62));
}

/* Icon rail on the left, rave band and window stacked in the right column. */
.desktop {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  align-content: start;
}

.desktop-icons {
  grid-column: 1;
  grid-row: 1;
}

.masthead {
  grid-column: 2;
  grid-row: 1;
}

.desktop-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.folder-shell {
  display: block;
}

.desktop-icons,
.icon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-icon,
.icon-grid a {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 4px 2px;
  color: var(--shell-white);
  border: 0;
  border-radius: var(--shell-radius);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.desktop-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.desktop-icon-glyph > svg,
.desktop-icon-glyph > img,
.desktop-icon > svg,
.desktop-icon > img,
.icon-grid svg,
.icon-grid img {
  width: 32px;
  height: 32px;
}

.desktop-icon-label {
  padding: 0 2px;
  text-shadow: 1px 1px 0 var(--shell-black);
}

.desktop-icon:hover .desktop-icon-label,
.desktop-icon:focus-visible .desktop-icon-label,
.icon-grid a:hover,
.icon-grid a:focus-visible {
  background: var(--shell-title-a);
  color: var(--shell-white);
  text-shadow: none;
}

/* --------------------------------------------------- 4. window chrome + title */

.window,
.win-window {
  min-width: 0;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: var(--shell-border);
  border-radius: var(--shell-radius);
  box-shadow:
    inset 1px 1px 0 var(--shell-white),
    inset -1px -1px 0 var(--shell-shadow);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
}

.title-bar,
.titlebar,
.window-titlebar,
.window-title,
[data-titlebar] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* W-20: exactly titlebar-height (24px) */
  height: var(--titlebar-height);
  padding: 0 3px 0 4px;
  background-color: var(--shell-title-a);
  /* W-20: shell-title-a -> shell-title-b */
  background-image: linear-gradient(90deg, var(--shell-title-a), var(--shell-title-b));
  color: var(--shell-title-text);
  border: 0;
  border-radius: var(--shell-radius);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  font-weight: 700;
  line-height: 1;
}

.title-bar-text,
.titlebar-text,
.window-title-text {
  margin: 0;
  padding: 0 4px;
  color: var(--shell-title-text);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-bar-controls,
.window-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.control-button,
.window-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  padding: 0;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: 0;
  border-radius: var(--shell-radius);
  box-shadow: var(--bevel-raised);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1;
}

.control-button svg,
.window-control svg {
  width: 8px;
  height: 8px;
}

.control-button:active,
.window-control:active {
  box-shadow: var(--bevel-pressed);
}

.window-body {
  padding: 12px;
  background: var(--shell-panel);
}

/* ------------------------------------------------------------- 5. the taskbar */

.taskbar,
.shell-taskbar,
#taskbar {
  position: fixed;
  inset: auto 0 0 0; /* W-07: pinned to the bottom edge */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* W-07: 48px desktop, 44px at <=768px.
     NOTE: tokens.css currently declares --taskbar-height as the plan's raw
     composite string ("48px desktop / 44px at <=768px"), which is not a usable
     CSS length, so this declaration is dropped by the browser and the bar falls
     back to auto height. Split the token (48px + a <=768px override to 44px) and
     this line needs no change. Reported in .buildloop/reports/build-w1-C.md. */
  height: var(--taskbar-height);
  padding: 0 3px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: 0;
  border-top: 2px solid var(--shell-white);
  border-radius: var(--shell-radius);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
}

.taskbar-left,
.taskbar-right,
.taskbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.taskbar-title {
  padding: 0 6px;
  font-weight: 700;
  white-space: nowrap;
}

/* W-09: the leftmost action is the Start button; W-18: bevel-raised exactly. */
.start-button,
.start {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: 0;
  border-radius: var(--shell-radius);
  box-shadow: var(--bevel-raised);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: default;
}

/* W-19: held / reported-open inverts to bevel-pressed. */
.start-button:active,
.start-button[aria-expanded="true"],
.start-button.is-open,
.start:active,
.start[aria-expanded="true"] {
  box-shadow: var(--bevel-pressed);
}

/* Every taskbar action (Resume, links, buttons) reads as a 95 button (W-18). */
.taskbar .taskbar-action,
.taskbar .taskbar-link,
.taskbar-right a,
.taskbar-right button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: 0;
  border-radius: var(--shell-radius);
  box-shadow: var(--bevel-raised);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1;
  text-decoration: none;
  cursor: default;
}

.taskbar .taskbar-action:active,
.taskbar-right a:active,
.taskbar-right button:active {
  box-shadow: var(--bevel-pressed);
}

.taskbar svg,
.status-chip svg {
  width: 16px;
  height: 16px;
}

/* W-14: a status chip and a live clock, both text-bearing elements. */
.status-chip,
.taskbar-status,
.taskbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: 0;
  border-radius: var(--shell-radius);
  box-shadow:
    inset 1px 1px 0 var(--shell-shadow),
    inset -1px -1px 0 var(--shell-white);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1.2;
  white-space: nowrap;
}

.clock,
.taskbar-clock {
  padding: 2px 8px;
  color: var(--shell-black);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1.2;
  white-space: nowrap;
}

/* ------------------------------------------------------------ 6. the Start menu */

/* Fallback anchor for a menu that is not inside the taskbar. */
.start-menu,
.startmenu {
  position: fixed;
  left: 0;
  bottom: var(--taskbar-height);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 208px;
  max-width: calc(100vw - 8px);
  padding: 3px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: var(--shell-border);
  border-radius: var(--shell-radius);
  box-shadow:
    inset 1px 1px 0 var(--shell-white),
    inset -1px -1px 0 var(--shell-shadow);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
}

/* Inside the taskbar (index.html): sit exactly on the taskbar's top edge, so the
   menu is anchored without needing the taskbar-height token to be valid. */
.taskbar .start-menu {
  position: absolute;
  inset: auto auto 100% 0;
  z-index: 1001;
}

/* Closed states the markup may use; `hidden` is handled by rule 1 and by the UA. */
.start-menu.is-closed,
.start-menu.closed,
.start-menu.hidden,
.start-menu[data-open="false"],
.start-menu[aria-hidden="true"],
.start-button[aria-expanded="false"] + .start-menu,
.start-button[aria-expanded="false"] ~ .start-menu {
  display: none;
}

/* W-18: every Start-menu item is bevel-raised exactly. */
.start-menu a,
.start-menu button,
.start-menu [role="menuitem"],
.startmenu a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 10px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: 0;
  border-radius: var(--shell-radius);
  box-shadow: var(--bevel-raised);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

.start-menu a:active,
.start-menu button:active {
  box-shadow: var(--bevel-pressed);
}

.start-menu svg,
.startmenu svg {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------- 7. folder chrome, 404 dialog box */

.directory-bar,
.folder-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 8px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: var(--shell-border);
  border-radius: var(--shell-radius);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
}

.directory-path,
.folder-path {
  margin: 0;
  word-break: break-word;
}

.back-button,
.back-link,
.project-back,
.shell-button,
.retro-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--shell-panel);
  color: var(--shell-black);
  border: 0;
  border-radius: var(--shell-radius);
  box-shadow: var(--bevel-raised);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
  line-height: 1.2;
  text-decoration: none;
  cursor: default;
}

.back-button:active,
.shell-button:active,
.retro-button:active {
  box-shadow: var(--bevel-pressed);
}

.back-button svg,
.shell-button svg,
.retro-button svg {
  width: 16px;
  height: 16px;
}

/* 404 / message box: centred in flow, never position:fixed (W-08).

   `justify-items: stretch` over a definite track, rather than `place-items:
   center`. With a centred item the track is sized to the box's max-content, and
   the box's own width is a percentage, which makes that indefinite: at 1280 the
   container resolved to 516px for a 440px box, so a 76 x 160 strip of the
   CONTAINER stood beside the dialog and the message box read as a rectangle with
   a slab attached to its right side. (The strip is visible because 404.html's
   <main> is painted --ms-paper by manuscript.css's `main:not(.desktop-main)`
   rule, which cannot tell the 404 from a project page.) The track is now the
   same expression as the box's own width, so box and container are one
   rectangle at every width. Vertical centring is unchanged. */
.dialog-shell,
.error-shell {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: stretch;
  grid-template-columns: min(440px, 100%);
  padding: 24px;
}

.dialog,
.win-dialog,
.error-dialog,
.message-box {
  width: min(440px, 100%);
  background: var(--shell-panel);
  color: var(--shell-black);
  border: var(--shell-border);
  border-radius: var(--shell-radius);
  box-shadow:
    inset 1px 1px 0 var(--shell-white),
    inset -1px -1px 0 var(--shell-shadow);
  font-family: var(--shell-font);
  font-size: var(--shell-size);
}

.dialog-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 10px;
}

.dialog-icon {
  width: 32px;
  height: 32px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 14px;
}

/* ---------------------------------------------- 8. narrow screens (shell zone) */

@media (max-width: 768px) {
  .desktop,
  .folder-shell {
    padding: 12px;
  }

  .desktop {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .desktop-icons {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .masthead {
    grid-column: 1;
    grid-row: 2;
  }

  .desktop-main {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 390px) {
  .desktop-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .taskbar {
    gap: 4px;
    padding: 0 2px;
  }
}

/* ------------------------------------------------------------------ 9. print */

@media print {
  .taskbar,
  .shell-taskbar,
  .start-menu,
  .desktop-icons,
  .icon-grid,
  .skip-link {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }
}