/* macos.app — desktop simulation, scoped to /playground/macos.
   Reuses main.css tokens on purpose: this should read as the site wearing a macOS
   costume, not a stock Aqua clone. Nothing here redefines :root. */

.mac-stage { margin-bottom: 2rem; }

.mac-desktop {
  position: relative;
  height: min(72vh, 620px);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Windows are absolutely positioned against this box, so it must be both the
     containing block and the stacking context for the whole desktop. */
  isolation: isolate;
  user-select: none;
}

/* ---- wallpapers ---- */
.mac-desktop[data-wallpaper='void'] {
  background: radial-gradient(circle at 50% 120%, #2a1b3d 0%, #0e0a14 60%);
}
.mac-desktop[data-wallpaper='dusk'] {
  background: linear-gradient(170deg, #1b1030 0%, #4a2352 45%, #8c3b63 100%);
}
.mac-desktop[data-wallpaper='grid'] {
  background-color: #0e0a14;
  background-image:
    repeating-linear-gradient(0deg, rgba(157, 123, 255, 0.09) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(157, 123, 255, 0.09) 0 1px, transparent 1px 24px);
}
.mac-desktop[data-wallpaper='pink'] {
  background: linear-gradient(135deg, #ff6bb5 0%, #9d7bff 50%, #5bcefa 100%);
}
.mac-desktop[data-wallpaper='crt'] {
  background-color: #0a0f0a;
  background-image: repeating-linear-gradient(0deg, rgba(91, 206, 250, 0.07) 0 1px, transparent 1px 3px);
}

.mac-desktop.is-asleep { filter: brightness(0.04); cursor: pointer; transition: filter 0.5s ease; }

/* ---- menu bar ---- */
.mac-menubar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 0.6rem;
  background: rgba(23, 16, 33, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-pixel);
  font-size: 0.6rem;
}

.mac-bar-left, .mac-bar-right { display: flex; align-items: center; gap: 0.75rem; }

/* The logo is a CSS-drawn blob, not an image: a real apple glyph would be both a
   trademark and, from a CDN, a CSP violation. */
.mac-apple {
  position: relative;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mac-apple::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--pink);
  border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
  box-shadow: 0 0 8px rgba(255, 107, 181, 0.5);
}
.mac-apple::after {
  content: '';
  position: absolute;
  top: 0;
  right: 3px;
  width: 5px;
  height: 4px;
  background: var(--pink);
  border-radius: 0 60% 0 60%;
  transform: rotate(-18deg);
}
.mac-apple.is-on::before { background: var(--violet); }

.mac-menu-app { color: var(--text); letter-spacing: 0.04em; }
.mac-bar-icon { font-size: 0.62rem; opacity: 0.75; }
.mac-clock { color: var(--text-dim); letter-spacing: 0.03em; }

.mac-menu-drop {
  position: absolute;
  top: 26px;
  left: 0.4rem;
  z-index: 600;
  min-width: 190px;
  padding: 4px;
  background: rgba(31, 22, 48, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.mac-menu-item {
  display: block;
  width: 100%;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}
.mac-menu-item:hover { background: var(--violet); color: var(--bg); }
.mac-menu-sep { height: 1px; margin: 4px 0.4rem; background: var(--border); }

/* ---- windows ---- */
.mac-win {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background: var(--layer);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  opacity: 0;
  /* transform is rewritten by JS every frame during a drag, so it must NEVER enter
     the transition list or every drag turns into a 160ms rubber band. */
  transition: opacity 0.16s ease, box-shadow 0.16s ease;
}
.mac-win.is-open { opacity: 1; }
.mac-win.is-focused { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.62); border-color: #43335f; }
.mac-win.is-dragging { transition: none; }
.mac-win.is-minimized, .mac-win.is-closing { opacity: 0; }
.mac-win.is-maximized { border-radius: 0; }

.mac-win-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  height: 28px;
  padding: 0 0.6rem;
  background: var(--layer-2);
  border-bottom: 1px solid var(--border);
  cursor: grab;
  touch-action: none;
}
.mac-win.is-dragging .mac-win-bar { cursor: grabbing; }

.mac-lights { display: flex; gap: 6px; }
.mac-light {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.12s ease;
}
.mac-win.is-focused .mac-light.is-close { background: #ff5f57; }
.mac-win.is-focused .mac-light.is-min { background: #febc2e; }
.mac-win.is-focused .mac-light.is-max { background: #28c840; }
.mac-light:hover { filter: brightness(1.25); }

.mac-win-title {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mac-win.is-focused .mac-win-title { color: var(--text); }

.mac-win-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  font-size: 0.8rem;
  user-select: text;
}

/* ---- resize grips ---- */
.mac-grip { position: absolute; touch-action: none; }
.mac-grip-n { top: -2px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.mac-grip-s { bottom: -2px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.mac-grip-e { right: -2px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.mac-grip-w { left: -2px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.mac-grip-ne { top: -2px; right: -2px; width: 12px; height: 12px; cursor: nesw-resize; }
.mac-grip-nw { top: -2px; left: -2px; width: 12px; height: 12px; cursor: nwse-resize; }
.mac-grip-se { bottom: -2px; right: -2px; width: 12px; height: 12px; cursor: nwse-resize; }
.mac-grip-sw { bottom: -2px; left: -2px; width: 12px; height: 12px; cursor: nesw-resize; }
.mac-win.is-maximized .mac-grip { display: none; }

/* ---- dock ---- */
.mac-dock-wrap {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 400;
  display: flex;
  justify-content: center;
  /* The wrapper spans the desktop so the dock centres, but it must not eat clicks
     meant for windows underneath it. */
  pointer-events: none;
}
.mac-dock {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: 5px 7px;
  background: rgba(31, 22, 48, 0.66);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  overflow-x: auto;
}
.mac-dock-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 42px;
  padding: 4px 0 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}
.mac-dock-btn:hover { transform: translateY(-5px) scale(1.12); background: rgba(157, 123, 255, 0.16); }
.mac-dock-icon { font-size: 1.35rem; line-height: 1.1; font-family: var(--font-pixel); }
.mac-dock-dot {
  position: absolute;
  bottom: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
}
.mac-dock-btn.is-running .mac-dock-dot { background: var(--pink); }
.mac-dock-btn.is-bouncing { animation: mac-bounce 0.55s ease; }
@keyframes mac-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-16px); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
}

/* ---- about this mac ---- */
.mac-modal-back {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.mac-modal { width: min(330px, 86%); padding: 1.4rem; text-align: center; }
.mac-modal-logo {
  width: 38px;
  height: 38px;
  margin: 0 auto 0.7rem;
  background: var(--pink);
  border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
  box-shadow: 0 0 18px rgba(255, 107, 181, 0.45);
}
.mac-modal-title { margin: 0; font-size: 1.15rem; color: var(--text); }
.mac-modal-ver { margin: 0.2rem 0 1rem; font-size: 0.72rem; }
.mac-modal-rows { margin-bottom: 1.1rem; font-size: 0.74rem; }
.mac-modal-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

/* ---- finder ---- */
.app-finder { display: flex; flex-direction: column; }
.finder-cols { display: flex; flex: 1 1 auto; min-height: 0; }
.finder-side {
  flex: 0 0 140px;
  padding: 0.5rem;
  background: rgba(14, 10, 20, 0.5);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.finder-side-head {
  padding: 0 0.35rem 0.4rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--text-dim);
}
.finder-item {
  display: block;
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
}
.finder-item:hover { color: var(--text); background: rgba(157, 123, 255, 0.12); }
.finder-item.is-on { background: var(--violet); color: var(--bg); }
.finder-pane { flex: 1 1 auto; padding: 0.9rem 1rem; overflow-y: auto; }
.finder-file-title { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--pink); }
.finder-list { margin: 0; padding-left: 1rem; }
.finder-list li { margin-bottom: 0.5rem; line-height: 1.55; }
.finder-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  background: var(--layer-2);
  border-top: 1px solid var(--border);
  font-size: 0.66rem;
  color: var(--text-dim);
}

/* ---- safari ---- */
.app-safari { display: flex; flex-direction: column; }
.safari-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  background: var(--layer-2);
  border-bottom: 1px solid var(--border);
}
.safari-nav { color: var(--text-dim); letter-spacing: 0.2em; }
.safari-url {
  flex: 1 1 auto;
  padding: 0.2rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.68rem;
  color: var(--text-dim);
}
.safari-view { flex: 1 1 auto; padding: 0.9rem 1rem; overflow-y: auto; }
.safari-h { margin: 0 0 0.6rem; font-size: 0.66rem; color: var(--text-dim); letter-spacing: 0.08em; }
.safari-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}
.safari-card {
  padding: 0.8rem;
  background: var(--layer-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.safari-card h3 { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--text); }
.safari-card p { margin: 0; font-size: 0.72rem; line-height: 1.5; }
.safari-card.is-private { border-style: dashed; opacity: 0.82; }
.safari-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.55rem; }
.safari-tag {
  padding: 1px 6px;
  background: rgba(157, 123, 255, 0.14);
  border-radius: 8px;
  font-size: 0.6rem;
  color: var(--violet);
}
.safari-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.55rem; font-size: 0.68rem; }

/* ---- mail ---- */
.app-mail { padding: 0.9rem 1rem; }
.app-mail .field { margin-bottom: 0.7rem; }
.app-mail .field textarea { min-height: 84px; }

/* ---- calculator ---- */
.app-calc { display: flex; flex-direction: column; background: #16101f; }
.calc-out {
  flex: 0 0 auto;
  padding: 0.9rem 0.8rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 1.8rem;
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calc-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; flex: 1 1 auto; padding: 1px; }
.calc-key {
  border: 0;
  background: var(--layer-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  cursor: pointer;
  transition: filter 0.1s ease;
}
.calc-key:hover { filter: brightness(1.35); }
.calc-key:active { background: var(--violet); color: var(--bg); }
.calc-key.k-op { background: var(--pink); color: var(--bg); }
.calc-key.k-fn { background: #2a1f3d; color: var(--text-dim); }
.calc-key.k-wide { grid-column: span 2; }

/* ---- notes ---- */
.app-notes { display: flex; flex-direction: column; }
.notes-area {
  flex: 1 1 auto;
  padding: 0.9rem 1rem;
  border: 0;
  background: #1a1426;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  resize: none;
}
.notes-area:focus { outline: none; }
.notes-foot {
  flex: 0 0 auto;
  min-height: 1.3rem;
  padding: 0.3rem 0.7rem;
  background: var(--layer-2);
  border-top: 1px solid var(--border);
  font-size: 0.62rem;
  color: var(--text-dim);
}

/* ---- settings ---- */
.app-settings { padding: 0.9rem 1rem; }
.set-h { margin: 0 0 0.7rem; font-size: 0.7rem; color: var(--text-dim); }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.6rem; }
.set-swatch {
  display: flex;
  align-items: flex-end;
  height: 62px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
}
.set-swatch.is-on { border-color: var(--pink); }
.set-swatch-label {
  width: 100%;
  padding: 2px 4px;
  background: rgba(14, 10, 20, 0.72);
  font-size: 0.58rem;
  color: var(--text);
}
.set-swatch.wp-void { background: radial-gradient(circle at 50% 120%, #2a1b3d 0%, #0e0a14 60%); }
.set-swatch.wp-dusk { background: linear-gradient(170deg, #1b1030 0%, #4a2352 45%, #8c3b63 100%); }
.set-swatch.wp-grid {
  background-color: #0e0a14;
  background-image:
    repeating-linear-gradient(0deg, rgba(157, 123, 255, 0.3) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(157, 123, 255, 0.3) 0 1px, transparent 1px 10px);
}
.set-swatch.wp-pink { background: linear-gradient(135deg, #ff6bb5 0%, #9d7bff 50%, #5bcefa 100%); }
.set-swatch.wp-crt {
  background-color: #0a0f0a;
  background-image: repeating-linear-gradient(0deg, rgba(91, 206, 250, 0.25) 0 1px, transparent 1px 3px);
}
.set-note { margin-top: 0.9rem; font-size: 0.68rem; }

/* ---- activity monitor ---- */
.app-activity { display: flex; flex-direction: column; }
.act-canvas { flex: 0 0 96px; width: 100%; background: #120d1c; border-bottom: 1px solid var(--border); }
.act-list { flex: 1 1 auto; padding: 0.4rem 0.7rem; overflow-y: auto; font-size: 0.7rem; }
.act-row {
  display: flex;
  justify-content: space-between;
  padding: 0.18rem 0;
  border-bottom: 1px solid rgba(46, 35, 68, 0.5);
}
.act-name { color: var(--text-dim); }
.act-pct { color: var(--pink); font-variant-numeric: tabular-nums; }

/* ---- trash ---- */
.app-trash { padding: 0.9rem 1rem; }
.trash-list {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  font-size: 0.74rem;
  line-height: 1.8;
  color: var(--text-dim);
}
.trash-list.is-gone { opacity: 0.15; text-decoration: line-through; transition: opacity 0.4s ease; }
.trash-msg { margin-top: 0.7rem; min-height: 1rem; font-size: 0.72rem; }

/* ---- terminal launcher ---- */
.app-term { padding: 1rem; }
.term-prompt { margin: 0 0 0.7rem; font-size: 0.76rem; color: var(--blue); }
.app-term p { margin-bottom: 0.9rem; line-height: 1.6; }

/* ---- mobile fallback ---- */
.mac-applist { display: none; }
.mac-stage.is-mobile .mac-desktop { display: none; }
.mac-stage.is-mobile .mac-applist { display: block; }

.mac-applist-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0.75rem 0.9rem;
  background: var(--layer);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.mac-applist-row.is-open {
  margin-bottom: 0;
  border-color: var(--pink);
  border-radius: var(--radius) var(--radius) 0 0;
}
.mac-applist-icon { font-size: 1.1rem; }
.mac-applist-panel {
  margin-bottom: 0.4rem;
  background: var(--layer);
  border: 1px solid var(--pink);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  font-size: 0.8rem;
}
/* Apps normally size to a window body; in the list they need explicit room. */
.mac-applist-panel .app-calc { height: 320px; }
.mac-applist-panel .app-notes { height: 260px; }
.mac-applist-panel .app-activity { height: 280px; }
.mac-applist-panel .app-finder { height: 320px; }
.mac-applist-panel .app-safari { height: 380px; }

@media (prefers-reduced-motion: reduce) {
  .mac-dock-btn, .mac-dock-btn.is-bouncing, .mac-win { animation: none; transition: none; }
}