/* ══════════════════════════════════════════════════════════
   window.css — the Macintosh window frame, on its own so that
   ANY page can use it, including 404.html, which deliberately
   loads none of the site chrome.

   Appearance only. Each page sets its own `position` — index
   places windows on a canvas with `absolute`, the popups use
   `fixed`, the 404 dialog just sits in normal flow. Where a
   window sits is the page's business; how it looks is not.

   Behaviour (drag, resize, focus, persistence) is windows.js.
   Reads --shadow from tokens.css, so load that first.
   ══════════════════════════════════════════════════════════ */

.mac-window:has(.resize-handle),
.lb-win:has(.resize-handle) { padding-bottom: 15px; }

/* The strip itself — same platinum as the scrollbar track, so the
   bottom edge of the window reads as one continuous piece of frame. */
.mac-window:has(.resize-handle)::after,
.lb-win:has(.resize-handle)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15px;
  background: var(--metal-track);
  border-top: 1px solid var(--metal-edge);
  pointer-events: none;
}

.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
  z-index: 1;                 /* above the strip painted by ::after */
  cursor: se-resize;
  background: var(--metal-face);
  border-top: 1px solid var(--metal-edge);
  border-left: 1px solid var(--metal-edge);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 2px,
    var(--metal-dark) 2px, var(--metal-dark) 3px
  );
}
.resize-handle:hover { background-color: var(--hover-grip); }

@media (max-width: 900px) {
  /* Windows can't be dragged or resized on a phone, so no frame strip. */
  .mac-window,
  .lb-win { padding-bottom: 0; }

  /* When a window is scrolled into view, stop short of the sticky bar
     rather than sliding underneath it. --bar-h is measured and published
     by chrome.js; the fallback covers the moment before it runs. */
  .mac-window { scroll-margin-top: calc(var(--bar-h, 44px) + 10px); }

  /* A stacked window has no reason to cap its own height — the page
     scrolls instead. !important because windows.js writes a restored
     max-height inline, and that would otherwise win. */
  .window-body {
    max-height: none !important;
    overflow-y: visible;
  }
  .mac-window::after,
  .lb-win::after { content: none; }
  .resize-handle { display: none; }
}


/* ══════════════════════════════════════════════════════════
   WINDOW FRAME — shared by every Macintosh window on the site.

   Appearance only. Each page sets its own `position` (index places
   windows on the canvas with `absolute`; the reviews and photos
   popups use `fixed`), because where a window sits is a page's own
   business — how it looks is not.

   Every window is the same three parts, in this order:
       .titlebar  ->  .window-body  ->  .resize-handle
   Keep that structure and a new window needs no CSS of its own.
   ══════════════════════════════════════════════════════════ */
.mac-window {
  background: var(--win);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  min-width: 240px;
  z-index: var(--z-window);
}

.mac-window.focused {
  /* No z-index here on purpose. Stacking is a real order, not a flag:
     windows.js hands each window an incrementing z-index as it is
     focused, so the ones you touched most recently stay above the ones
     you didn't. A binary focused/unfocused rule would drop every other
     window to the same level, where DOM order decides — and the post
     detail window is first in the DOM (it has to be, so it stacks above
     the blog on mobile), so it would fall to the very back. */
  box-shadow: var(--shadow);
}

.titlebar {
  background: var(--titlebar);
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.tb-closebox {
  /* Works as a <span> or a <button>: reset the button defaults so the
     element used doesn't change how it looks. On the 404 it is a real
     button because it really closes something. */
  appearance: none;
  background: none;
  padding: 0;
  font: inherit;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255,255,255,0.45);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-hand);
}

.tb-closebox:hover {
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
}

.tb-title {
  flex: 1;
  text-align: center;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tb-text);
  position: relative;
  z-index: 1;
  padding-right: 13px;        /* balances the closebox */
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-body {
  overflow-y: auto;
  max-height: 58vh;
}

/* ══════════════════════════════════════════════════════════
   IMAGE WINDOW — a picture opened as a document.

   Not a lightbox: nothing dims, nothing is trapped, the page stays
   usable behind it. Floating and draggable on every screen size,
   including phones — a viewer you opened on top of something should
   stay on top of it rather than stacking into the page flow.
   ══════════════════════════════════════════════════════════ */
.img-win {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  display: none;
  flex-direction: column;
  z-index: var(--z-popup);
}
.img-win.open { display: flex; }

.img-area {
  background: var(--titlebar);
  height: min(62vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.img-none {
  display: none;
  font-family: var(--ui);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ghost);
}

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

.img-foot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--rule);
}
.img-text { flex: 1; min-width: 0; }

.img-cap {
  font-family: var(--prose);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 3px;
}
.img-meta {
  font-family: var(--ui);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.img-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* One image has nowhere to go, so the controls simply aren't there. */
.img-win.solo .img-nav { display: none; }

.img-btn {
  font-family: var(--ui);
  font-size: 9px;
  min-width: 22px;
  height: 20px;
  background: var(--win);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: var(--cursor-hand);
}
.img-btn:hover:not(:disabled) { background: var(--hover-light); }
.img-btn:active:not(:disabled) { box-shadow: none; transform: var(--shadow-press); }
.img-btn:disabled { opacity: 0.3; box-shadow: none; cursor: default; }

.img-count {
  font-family: var(--ui);
  font-size: 8px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: center;
}

/* A body image is a link, not an embed — it should read as one. */
.img-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  cursor: var(--cursor-hand);
}
.img-link::before {
  content: '\25A3';          /* a small framed square, i.e. "a picture" */
  font-family: var(--ui);
  font-size: 0.85em;
  margin-right: 4px;
  color: var(--muted);
}
.img-link:hover { background: var(--surface-hover); }

@media (max-width: 900px) {
  .img-area { height: min(48vh, 360px); }
  /* Stays a floating window here too, unlike the canvas windows. */
  .img-win { width: calc(100vw - 24px); }
}