/* ============================================================
   DENTATUS — System 7 skin × Erchard Samoh soul
   ============================================================ */

:root {
  --ink-strong: rgba(0, 0, 0, 0.88);
  --ink-body:   rgba(0, 0, 0, 0.78);
  --ink-mid:    rgba(0, 0, 0, 0.55);
  --ink-faint:  rgba(0, 0, 0, 0.35);
  --accent:     #0040d4;   /* Mac blue */
  --desktop:    #c9c9c9;
  --window-bg:  #ffffff;
  --titlebar:   #d0d0d0;
  --hair:       #a0a0a0;

  --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "Menlo", monospace;
  --font-chicago: "Silkscreen", "Chicago", "Geneva", sans-serif;

  --shadow-hard: 2px 2px 0 rgba(0,0,0,0.9);

  /* ---- System 7 real-scale tokens (640x480 CRT feel, NOT stretched macOS) ---- */
  --menubar-h: 34px;        /* real S7 menu bar is chunky */
  --sys-font: 13px;         /* Chicago default point size */
  --icon-glyph: 48px;       /* big pixel icons */
  --px: 16px;               /* coarse desktop checkerboard pixel */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-font-smoothing: none;   /* crisp, bitmap-ish */
  font-smooth: never;
}

body {
  color: var(--ink-strong);
  user-select: none;
  cursor: default;
  /* System 7 default desktop: authentic "50% Gray" 8x8 checkerboard
     (bitmap from Kelsidavis/System7 patterns.json:
      10101010 / 01010101 / 10101010 / 01010101 ...) */
  background-color: #d6d6d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23d6d6d6'/%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23c0c0c0'/%3E%3C/svg%3E");
  background-size: var(--px) var(--px);
}

/* ---------- grain overlay over everything ---------- */
.grain::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image: url("assets/grain.png");
  background-size: 256px 256px;
  opacity: 0.07;
  mix-blend-mode: multiply;
  z-index: 9999;
}
body.grain { position: relative; }

/* ============================================================
   MENU BAR
   ============================================================ */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--menubar-h);
  background: #ffffff;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  font-family: var(--font-chicago);
  font-size: var(--sys-font);
  letter-spacing: 0;
  z-index: 1000;
  -webkit-font-smoothing: none;
}

.menubar__apple {
  font-size: 18px;
  line-height: 1;
  padding: 3px 12px 4px;
  cursor: pointer;
  color: var(--ink-strong);
}
.menubar__apple:hover { background: var(--accent); color: #fff; }

.menu { position: relative; height: 100%; }
.menu__label {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  cursor: pointer;
}
.menu__label:hover,
.menu.open .menu__label { background: var(--accent); color: #fff; }

.menu__dropdown {
  display: none;
  position: absolute;
  top: var(--menubar-h); left: 0;
  min-width: 210px;
  margin: 0;
  padding: 5px 0;
  list-style: none;
  background: #fff;
  border: 2px solid #000;
  box-shadow: var(--shadow-hard);
  z-index: 1100;
  font-family: var(--font-chicago);
  font-size: var(--sys-font);
}
.menu.open .menu__dropdown { display: block; }
.menu__dropdown li {
  padding: 5px 18px;
  cursor: pointer;
}
.menu__dropdown li:hover { background: var(--accent); color: #fff; }
.menu__sep { height: 2px; background: var(--hair); margin: 5px 0; padding: 0 !important; cursor: default !important; }
.menu__sep:hover { background: var(--hair); }

.menubar__right { margin-left: auto; display: flex; gap: 16px; }
.menubar__item { font-size: var(--sys-font); }
.menubar__est { color: var(--accent); font-weight: 700; }

/* ============================================================
   DESKTOP
   ============================================================ */
.desktop {
  position: fixed;
  top: var(--menubar-h); left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

/* marquee painted on the wallpaper — restrained, like a label on the S7 desktop */
.wall-marquee {
  position: absolute;
  top: 5%;
  left: 5%;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 1;
  pointer-events: none;
}
.wall-marquee__line {
  font-family: "VT323", var(--font-chicago);
  font-weight: 400;
  font-size: clamp(3rem, 12vh, 9rem);
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-strong);
  opacity: 0.9;
  animation: flicker 0.5s steps(2, end) infinite;
}
.wall-marquee__line--accent { color: var(--accent); animation: none; }
@keyframes flicker {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(1px, 0); }
}

.wall-teeth {
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
}

/* icon grid — free-position container for draggable icons */
.icon-grid {
  position: absolute;
  top: 56%;
  left: 5%;
  z-index: 3;
  width: 0;
  height: 0;
}
.icon {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 6px 10px;
  border: 2px solid transparent;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.icon.selected { background: transparent; }
.icon.selected .icon__glyph { filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg); }
.icon.selected .icon__label { color: #fff; background: var(--accent); border-color: #000; }
.icon__glyph { width: var(--icon-glyph); height: var(--icon-glyph); flex: 0 0 auto; }
.icon__label {
  font-family: var(--font-chicago);
  font-size: 13px;
  color: var(--ink-strong);
  background: #fff;
  border: 2px solid #000;
  padding: 2px 7px 3px;
  white-space: nowrap;
  line-height: 1.4;
}

.trash {
  position: absolute;
  bottom: 10px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: 2px solid transparent;
}
.trash:hover { background: rgba(0,0,0,0.08); }
.trash__label { font-family: var(--font-mono); font-size: 13px; color: var(--ink-body); }
.trash.selected { background: transparent; }
.trash.selected svg { filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg); }
.trash.selected .trash__label { color: #fff; background: var(--accent); border: 2px solid #000; padding: 2px 7px 3px; }

/* welcome document — pinned to right side, below the trash */
.welcome-icon {
  right: 20px;
  bottom: 110px;
  left: auto;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
}

/* ============================================================
   WINDOWS
   ============================================================ */
.windows { position: relative; }

.window {
  position: absolute;
  min-width: 260px;
  max-width: 86vw;
  background: var(--window-bg);
  border: 2px solid #000;
  box-shadow: -1px -1px 0 0 #fff inset, 3px 3px 0 rgba(0,0,0,0.35);
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.window.focused { z-index: 50; }
.window.minimized { display: none; }

.window__titlebar {
  height: 28px;
  background: #fff;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  cursor: grab;
  touch-action: none;
  position: relative;
}
/* classic S7 titlebar pinstripes */
.window__titlebar::before {
  content: "";
  position: absolute;
  left: 32px; right: 32px; top: 5px; bottom: 5px;
  background: repeating-linear-gradient(
    0deg,
    #000 0px, #000 1px,
    transparent 1px, transparent 3px
  );
  opacity: 0.55;
}
.window.focused .window__titlebar::before { opacity: 1; }
.window__titlebar:active { cursor: grabbing; }
.window__close, .window__zoom {
  width: 18px; height: 18px;
  border: 2px solid #000;
  background: #fff;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;              /* no glyph text — symbols are pure CSS */
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
.window__close:hover, .window__zoom:hover { background: #000; }
/* close box: System 7 nested square */
.window__close::after {
  content: "";
  width: 10px; height: 10px;
  border: 2px solid #000;
  background: #fff;
}
.window__close:hover::after { background: #fff; }
/* zoom box: hollow square inside */
.window__zoom::after {
  content: "";
  width: 7px; height: 7px;
  border: 2px solid #000;
  background: #fff;
}
.window.maximized .window__zoom::after { display: none; }
.window__title {
  flex: 1;
  text-align: center;
  font-family: var(--font-chicago);
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 8px;
  background: #fff;
  border: 2px solid #000;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
.window.focused .window__title { background: #fff; }
.window__body {
  padding: 14px;
  overflow: auto;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-body);
  cursor: auto;
  max-height: 68vh;
}

/* classic Mac scrollbar */
.window__body::-webkit-scrollbar { width: 20px; }
.window__body::-webkit-scrollbar-track {
  background: #fff;
  background-image: repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%);
  background-size: 2px 2px;
  border-left: 2px solid #000;
}
.window__body::-webkit-scrollbar-thumb {
  background: #fff;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
}
.window__body::-webkit-scrollbar-button:single-button {
  background: #fff;
  border: 2px solid #000;
  border-left: none;
  display: block;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
  /* classic Mac triangle arrows via inline SVG */
}
.window__body::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 6 L4 2 L7 6 Z' fill='%23000'/%3E%3C/svg%3E");
}
.window__body::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2 L4 6 L7 2 Z' fill='%23000'/%3E%3C/svg%3E");
}

.window__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink-strong);
  text-transform: uppercase;
}
.window__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mid);
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}
.window__body p { margin: 0 0 8px; }
.window__body img { display: block; width: 100%; border: 2px solid var(--hair); }

.media-placeholder {
  background: #cfcfc8;
  min-height: 180px;          /* fallback for Safari without aspect-ratio */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 14px;
  margin: 8px 0;
}

/* ---------- image viewer ---------- */
.window--viewer .window__body { padding: 0; display: flex; flex-direction: column; }
.viewer__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 2px solid #000;
  background: #fff;
}
.viewer__btn {
  font-family: var(--font-chicago);
  font-size: 14px;
  width: 30px; height: 26px;
  border: 2px solid #000;
  background: #fff;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.viewer__btn--wide { width: auto; padding: 0 10px; }
.viewer__btn:active { background: #000; color: #fff; }
.viewer__level {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mid);
  min-width: 48px;
  text-align: center;
}
.viewer__stage {
  position: relative;
  height: 46vh;
  min-height: 260px;
  overflow: hidden;
  background: #fff;
  background-image: repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
  cursor: grab;
  touch-action: none;
}
.viewer__stage:active { cursor: grabbing; }
.viewer__img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  image-rendering: pixelated;
  user-select: none;
  transition: none;
}
.viewer__caption {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mid);
  padding: 6px 10px;
  border-top: 2px solid #000;
  background: #fff;
}

/* ---------- calculator (classic Mac desk accessory) ---------- */
.window--calculator .window__body { padding: 0; }
.calc {
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc__screen {
  font-family: var(--font-chicago);
  font-size: 22px;
  text-align: right;
  padding: 8px 10px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #999, inset -1px -1px 0 #fff;
  color: var(--ink-strong);
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  min-height: 40px;
}
.calc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.calc__btn {
  font-family: var(--font-chicago);
  font-size: 16px;
  height: 38px;
  border: 2px solid #000;
  background: #fff;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: var(--ink-strong);
}
.calc__btn:active { background: #000; color: #fff; }
.calc__btn--op { font-weight: 700; }
.calc__btn--zero { grid-column: span 2; }

/* ---------- boot overlay ---------- */
.boot {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #d6d6d6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
.boot.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.boot__box { text-align: center; }
.boot__mac { display: block; margin: 0 auto 10px; }
.boot__word {
  font-family: var(--font-chicago);
  font-size: 34px;
  letter-spacing: 0;
  margin-top: 6px;
  color: var(--ink-strong);
  -webkit-font-smoothing: none;
}
.boot__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  margin-top: 2px;
}

/* ---------- hidden marquee (menu toggle) ---------- */
.wall-marquee.hidden-wall { display: none; }

/* ---------- trash emptying animation ---------- */
.trash.emptying svg {
  animation: trashShake 0.6s ease;
}
@keyframes trashShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-3deg); }
  50% { transform: translateX(4px) rotate(3deg); }
  75% { transform: translateX(-2px); }
}

/* ---------- maximized window ---------- */
.window.maximized .window__zoom { background: #fff; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wall-marquee__line { animation: none; }
  .trash.emptying svg { animation: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .wall-marquee { top: 8%; left: 3%; }
  .icon-grid { top: 40%; }
  .wall-teeth { display: none; }
}

/* ============================================================
   DEEP MACINTOSH LAYER — apple menu, about, control panels,
   shut down, lasso, crash dialog, system sounds
   ============================================================ */

/* apple menu label */
.menu--apple .menu__label { padding: 0 12px; }
.menu--apple .menu__label--apple svg { display: block; }

/* --- about this macintosh --- */
.aboutmac {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000;
  visibility: hidden;
  pointer-events: none;   /* never block the page while hidden (Safari safety) */
}
.aboutmac.show { visibility: visible; pointer-events: auto; }
.aboutmac__panel {
  width: 340px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: -1px -1px 0 0 #fff inset, 3px 3px 0 rgba(0,0,0,0.45);
  padding: 22px;
  position: relative;
}
.aboutmac__mac { text-align: center; margin-bottom: 14px; }
.aboutmac__sys {
  font-family: var(--font-chicago);
  font-size: 17px;
  text-align: center;
  margin-bottom: 14px;
}
.aboutmac__info {
  font-family: var(--font-chicago);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: var(--ink-body);
}
.aboutmac__ok {
  display: block;
  margin: 18px auto 0;
  width: 88px;
  height: 28px;
  font-family: var(--font-chicago);
  font-size: 14px;
  border: 2px solid #000;
  background: #fff;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
  cursor: pointer;
  outline-offset: 2px;
}
.aboutmac__ok:active { background: #000; color: #fff; }

/* --- control panels --- */
.cp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  padding: 4px 0;
}
.cp__item { display: flex; flex-direction: column; gap: 8px; }
.cp__label {
  font-family: var(--font-chicago);
  font-size: 13px;
  color: var(--ink-body);
}
.cp__patterns {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.cp__pat {
  width: 100%;
  min-height: 28px;           /* fallback for Safari without aspect-ratio */
  aspect-ratio: 1;
  border: 2px solid #000;
  cursor: pointer;
}
.cp__pat.active { outline: 3px solid var(--accent); outline-offset: 1px; }
.cp__slider {
  -webkit-appearance: none;
  height: 20px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #999, inset -1px -1px 0 #fff;
  cursor: pointer;
  padding: 0;
}
.cp__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 18px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
}
.cp__value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mid);
}

/* --- shut down --- */
.shutdown {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 13000;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.shutdown.show { visibility: visible; pointer-events: auto; opacity: 1; }
.shutdown__text {
  font-family: var(--font-chicago);
  font-size: 19px;
  color: #fff;
  text-align: center;
  line-height: 1.8;
}

/* --- lasso selection --- */
.lasso {
  position: fixed;
  border: 1px dashed #000;
  background: rgba(0, 64, 212, 0.12);
  z-index: 9000;
  display: none;
  pointer-events: none;
}
.lasso.active { display: block; }

/* --- crash / bomb dialog --- */
.bomb-dialog {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bomb-dialog__panel {
  width: 400px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
  padding: 22px;
}
.bomb-dialog__title {
  font-family: var(--font-chicago);
  font-size: 16px;
  margin-bottom: 14px;
}
.bomb-dialog__body {
  font-family: var(--font-chicago);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-body);
  margin-bottom: 18px;
}
.bomb-dialog__btn {
  font-family: var(--font-chicago);
  font-size: 14px;
  border: 2px solid #000;
  background: #fff;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
  padding: 4px 22px;
  cursor: pointer;
}
.bomb-dialog__btn:active { background: #000; color: #fff; }

/* draggable icons */
.icon.dragging { opacity: 0.75; z-index: 50; }

/* I-beam cursor for editable-looking text */
.cursor-ibeam { cursor: text; }