/* ============================================================
   WINDOW MANAGER
   Real windows on the desktop: drag, resize from any edge,
   minimise, maximise, close, many at once.

   Geometry is stored in PERCENTAGES of the desktop, so windows
   keep their place and proportion when the glass is resized.
   Chrome is sized in cqw so it scales with the rest of the screen,
   through --q, which is 1cqw on a wide screen and larger in portrait
   (set in style.css), so one set of numbers serves both.

   Palette matches the case studies, so a study opened in a window
   reads as one object rather than a page inside a frame.
   ============================================================ */

:root {
  --wm-paper:  #e9e4d8;
  --wm-ink:    #37373a;
  --wm-muted:  #7c7566;
  --wm-accent: #b4564b;
  --wm-bar:    calc(3.4 * var(--q, 1cqw));   /* title bar height */
  --wm-edge:   calc(0.22 * var(--q, 1cqw));  /* border weight */
}

/* ---------- layer ---------- */
.wm-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;   /* only windows catch events */
}
.wm-layer .wm-win { pointer-events: auto; }

/* ---------- window ---------- */
.wm-win {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--wm-paper);
  border: var(--wm-edge) solid var(--wm-ink);
  border-radius: calc(1.4 * var(--q, 1cqw));
  box-shadow: calc(0.8 * var(--q, 1cqw)) calc(1 * var(--q, 1cqw)) 0 rgba(55, 55, 58, 0.18);
  overflow: hidden;
  min-width: calc(22 * var(--q, 1cqw));
  min-height: calc(14 * var(--q, 1cqw));
  animation: wm-in 200ms cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes wm-in {
  from { transform: scale(0.94) translateY(calc(1.2 * var(--q, 1cqw))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.wm-win.is-dragging,
.wm-win.is-resizing { animation: none; user-select: none; }
.wm-win.is-max {
  border-radius: 0;
  box-shadow: none;
}
.wm-win.is-min { display: none; }

/* focus: the front window gets full contrast, the rest recede */
.wm-win:not(.is-front) { box-shadow: calc(0.5 * var(--q, 1cqw)) calc(0.6 * var(--q, 1cqw)) 0 rgba(55, 55, 58, 0.12); }
.wm-win:not(.is-front) .wm-bar { opacity: 0.62; }

/* ---------- title bar ---------- */
.wm-bar {
  display: flex;
  align-items: stretch;
  height: var(--wm-bar);
  flex: none;
  border-bottom: var(--wm-edge) solid var(--wm-ink);
  background: var(--wm-paper);
  cursor: grab;
  touch-action: none;
}
.wm-win.is-dragging .wm-bar { cursor: grabbing; }

.wm-bar .wm-id {
  display: flex;
  align-items: center;
  gap: calc(0.8 * var(--q, 1cqw));
  padding: 0 calc(1.3 * var(--q, 1cqw));
  border-right: var(--wm-edge) solid var(--wm-ink);
  flex: none;
  max-width: 55%;
}
.wm-bar .wm-chip {
  width: calc(1.2 * var(--q, 1cqw));
  height: calc(1.2 * var(--q, 1cqw));
  border: calc(0.17 * var(--q, 1cqw)) solid var(--wm-ink);
  border-radius: calc(0.25 * var(--q, 1cqw));
  position: relative;
  flex: none;
}
.wm-bar .wm-chip::after {
  content: '';
  position: absolute;
  inset: calc(0.17 * var(--q, 1cqw));
  background: var(--win-accent, var(--wm-accent));
}
.wm-bar .wm-title {
  font-family: 'Silkscreen', var(--bit, monospace);
  font-size: calc(1.05 * var(--q, 1cqw));
  letter-spacing: 0.08em;
  color: var(--wm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the striped drag field */
.wm-bar .wm-grip {
  flex: 1;
  background: repeating-linear-gradient(0deg,
    var(--wm-ink) 0 calc(0.17 * var(--q, 1cqw)), transparent calc(0.17 * var(--q, 1cqw)) calc(0.6 * var(--q, 1cqw)));
  min-width: calc(1 * var(--q, 1cqw));
}

.wm-bar .wm-acts {
  display: flex;
  align-items: center;
  gap: calc(0.6 * var(--q, 1cqw));
  padding: 0 calc(1.2 * var(--q, 1cqw));
  border-left: var(--wm-edge) solid var(--wm-ink);
  flex: none;
  cursor: default;
}
.wm-bar .wm-meta {
  font-family: 'Silkscreen', var(--bit, monospace);
  font-size: calc(0.92 * var(--q, 1cqw));
  color: var(--wm-muted);
  margin-right: calc(0.4 * var(--q, 1cqw));
  white-space: nowrap;
}

/* the three buttons, drawn to match the case-study chrome */
.wm-btn {
  all: unset;
  width: calc(1.3 * var(--q, 1cqw));
  height: calc(1.3 * var(--q, 1cqw));
  border: calc(0.17 * var(--q, 1cqw)) solid var(--wm-ink);
  color: var(--wm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  transition: background 120ms ease;
}
.wm-btn:hover { background: var(--win-accent, var(--wm-accent)); border-color: var(--win-accent, var(--wm-accent)); }
.wm-btn:hover > * { background: var(--wm-paper); color: var(--wm-paper); }
.wm-btn:focus-visible { outline: calc(0.17 * var(--q, 1cqw)) solid var(--win-accent, var(--wm-accent)); outline-offset: calc(0.2 * var(--q, 1cqw)); }

.wm-btn--min { border-radius: 50%; align-items: flex-end; }
.wm-btn--min i { width: calc(0.65 * var(--q, 1cqw)); height: calc(0.17 * var(--q, 1cqw)); background: currentColor; margin-bottom: calc(0.22 * var(--q, 1cqw)); display: block; }
.wm-btn--max { border-radius: calc(0.25 * var(--q, 1cqw)); }
.wm-btn--max i { width: calc(0.55 * var(--q, 1cqw)); height: calc(0.45 * var(--q, 1cqw)); border: calc(0.14 * var(--q, 1cqw)) solid currentColor; display: block; background: none !important; }
.wm-btn--close { border-radius: 50%; }
.wm-btn--close i {
  font-family: 'Silkscreen', monospace;
  font-size: calc(0.68 * var(--q, 1cqw));
  line-height: 1;
  color: currentColor;
  background: none !important;
  font-style: normal;
}

/* ---------- body ---------- */
.wm-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--wm-paper);
  -webkit-overflow-scrolling: touch;
}
.wm-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #d5cdba;
}

/* HTML content windows (about, contact, colophon) */
.wm-prose {
  padding: calc(2.6 * var(--q, 1cqw)) calc(3 * var(--q, 1cqw)) calc(3 * var(--q, 1cqw));
  color: #2f2f31;
  font-family: 'Source Serif 4', Georgia, serif;
}
.wm-prose .kicker {
  font-family: 'Silkscreen', monospace;
  font-size: calc(0.95 * var(--q, 1cqw));
  letter-spacing: 0.12em;
  color: #4f63a4;
  margin: 0 0 calc(1.2 * var(--q, 1cqw));
}
.wm-prose h2 {
  font-family: 'Silkscreen', monospace;
  font-size: calc(2.2 * var(--q, 1cqw));
  line-height: 1.05;
  color: var(--win-accent, var(--wm-accent));
  margin: 0 0 calc(1.6 * var(--q, 1cqw));
  letter-spacing: 0.02em;
}
.wm-prose p {
  font-size: calc(1.28 * var(--q, 1cqw));
  line-height: 1.62;
  margin: 0 0 calc(1.1 * var(--q, 1cqw));
  max-width: 62ch;
}
.wm-prose p:last-child { margin-bottom: 0; }
.wm-prose a { color: #4f63a4; text-decoration: none; border-bottom: 1px solid currentColor; }
.wm-prose a:hover { color: var(--win-accent, var(--wm-accent)); }
.wm-prose .rowlist { display: grid; gap: calc(0.7 * var(--q, 1cqw)); margin-top: calc(0.4 * var(--q, 1cqw)); }
.wm-prose .rowlist div { font-size: calc(1.28 * var(--q, 1cqw)); }
.wm-prose .rowlist b {
  font-family: 'Silkscreen', monospace;
  font-size: calc(0.92 * var(--q, 1cqw));
  letter-spacing: 0.1em;
  color: var(--wm-muted);
  display: inline-block;
  min-width: calc(9 * var(--q, 1cqw));
  font-weight: 400;
}
.wm-prose .cta {
  display: inline-block;
  margin-top: calc(1.4 * var(--q, 1cqw));
  font-family: 'Silkscreen', monospace;
  font-size: calc(1.05 * var(--q, 1cqw));
  letter-spacing: 0.06em;
  color: var(--wm-paper);
  background: var(--wm-ink);
  padding: calc(0.8 * var(--q, 1cqw)) calc(1.5 * var(--q, 1cqw));
  border: 0;
  text-decoration: none;
  transition: background 140ms ease;
}
.wm-prose .cta:hover { background: var(--win-accent, var(--wm-accent)); color: var(--wm-paper); }

/* ---------- resize handles ---------- */
.wm-rs { position: absolute; z-index: 5; }
.wm-rs--n  { top: 0; left: 0; right: 0; height: calc(0.55 * var(--q, 1cqw)); cursor: ns-resize; }
.wm-rs--s  { bottom: 0; left: 0; right: 0; height: calc(0.55 * var(--q, 1cqw)); cursor: ns-resize; }
.wm-rs--w  { left: 0; top: 0; bottom: 0; width: calc(0.55 * var(--q, 1cqw)); cursor: ew-resize; }
.wm-rs--e  { right: 0; top: 0; bottom: 0; width: calc(0.55 * var(--q, 1cqw)); cursor: ew-resize; }
.wm-rs--nw { top: 0; left: 0; width: calc(1.1 * var(--q, 1cqw)); height: calc(1.1 * var(--q, 1cqw)); cursor: nwse-resize; }
.wm-rs--ne { top: 0; right: 0; width: calc(1.1 * var(--q, 1cqw)); height: calc(1.1 * var(--q, 1cqw)); cursor: nesw-resize; }
.wm-rs--sw { bottom: 0; left: 0; width: calc(1.1 * var(--q, 1cqw)); height: calc(1.1 * var(--q, 1cqw)); cursor: nesw-resize; }
.wm-rs--se { bottom: 0; right: 0; width: calc(1.1 * var(--q, 1cqw)); height: calc(1.1 * var(--q, 1cqw)); cursor: nwse-resize; }
.wm-win.is-max .wm-rs { display: none; }

/* a drag or resize in progress must not let the pointer fall into an
   iframe, which would swallow the move events */
.wm-win.is-dragging .wm-body,
.wm-win.is-resizing .wm-body { pointer-events: none; }

/* ---------- minimised chips, folded into the status bar ---------- */
.wm-tasks {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--q, 1cqw));
  margin-left: calc(1.6 * var(--q, 1cqw));
  min-width: 0;
}
.wm-task {
  all: unset;
  cursor: pointer;
  font-family: 'Silkscreen', monospace;
  font-size: calc(1.5 * var(--q, 1cqw));
  color: var(--menu-ink, #b5a483);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  max-width: calc(14 * var(--q, 1cqw));
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 140ms ease;
}
.wm-task::before { content: '▸ '; }
.wm-task:hover { color: #f0e6d2; border-bottom-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .wm-win { animation: none; }
}

/* ============================================================
   TINTED TITLE BAR
   Each project carries a dominant colour and wears it on the bar,
   the way Reflexion's export does. It is the fastest way to tell
   two open windows apart at a glance.
   ============================================================ */
.wm-win[data-tint] .wm-bar {
  background: var(--win-accent, var(--wm-accent));
}
.wm-win[data-tint] .wm-bar .wm-title { color: #f4eddc; }
.wm-win[data-tint] .wm-bar .wm-meta  { color: rgba(244, 237, 220, 0.72); }
.wm-win[data-tint] .wm-bar .wm-id,
.wm-win[data-tint] .wm-bar .wm-acts  { border-color: rgba(244, 237, 220, 0.38); }
.wm-win[data-tint] .wm-bar .wm-grip  {
  background: repeating-linear-gradient(0deg,
    rgba(244, 237, 220, 0.5) 0 calc(0.17 * var(--q, 1cqw)), transparent calc(0.17 * var(--q, 1cqw)) calc(0.6 * var(--q, 1cqw)));
}
.wm-win[data-tint] .wm-chip {
  border-color: #f4eddc;
  background: #f4eddc;
}
.wm-win[data-tint] .wm-chip::after { background: var(--win-accent, var(--wm-accent)); }
.wm-win[data-tint] .wm-btn {
  color: #f4eddc;
  border-color: #f4eddc;
}
.wm-win[data-tint] .wm-btn:hover {
  background: #f4eddc;
  border-color: #f4eddc;
  color: var(--win-accent, var(--wm-accent));
}
.wm-win[data-tint] .wm-btn:hover > * {
  background: var(--win-accent, var(--wm-accent));
  color: var(--win-accent, var(--wm-accent));
}
.wm-win[data-tint] .wm-btn--max:hover i {
  background: none !important;
  border-color: var(--win-accent, var(--wm-accent));
}
.wm-win[data-tint] .wm-btn--close:hover i { background: none !important; }

/* an embedded document fills the window body */
.wm-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #d5cdba;
}

/* fallback copy shown over a dark document */
.wm-prose--dark { color: #e4ddcd; }
.wm-prose--dark .kicker { color: #9ab0e0; }
.wm-prose--dark .cta { background: #e4ddcd; color: #21170a; }