/* ===========================
   System 4 proportions (scalable)
   Turn the single knob below:
   =========================== */
:root{
  --px: 1.5;           /* 1 = tiny authentic, 1.25 comfy, 1.5 chunky */
  --paper: #fff;
  --ink: #000;
  --desktop: #9a9a9a;
}


/* Make titlebar draggable by touch without scrolling the page */
.titlebar { touch-action: none; }

/* Buttons/icons feel snappier on touch */
.desk-icon, .lang-btn, .ctl .btn-close { touch-action: manipulation; }

/* (Optional) Slightly bigger touch targets on mobile */
@media (max-width: 600px){
  .desk-icon { width: calc(var(--px) * 70px); }
  .desk-icon .glyph{ width: calc(var(--px) * 56px); height: calc(var(--px) * 60px); }
  .ctl .btn-close { width: calc(var(--px) * 12px); height: calc(var(--px) * 12px); }
}


/* Close button looks like a tiny 1-bit X */
.ctl .btn-close {
  width: calc(var(--px) * 10px);
  height: calc(var(--px) * 10px);
  border: calc(var(--px) * 1px) solid #000;
  background: #fff;
  position: relative;
}

/* draw the X with two 1px lines */
.ctl .btn-close::before,
.ctl .btn-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--px) * 8px);
  height: calc(var(--px) * 1px);
  background: #000;
  transform-origin: center;
}

.ctl .btn-close::before { transform: translate(-50%, -50%) rotate(45deg);  }
.ctl .btn-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }


/* reset-ish */
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: "ChicagoFLF","VT323",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color: var(--ink);
  overflow: hidden;
  background-color: var(--desktop);
  background-image: url("icons/dither.svg");
  /* scale the background pixels with the same knob */
  background-size: calc(var(--px) * 4px) calc(var(--px) * 4px);
  image-rendering: pixelated;
}

/* ===========================
   Menubar (≈20px tall originally)
   =========================== */
.menubar{
  position: fixed; inset: 0 0 auto 0;
  height: calc(var(--px) * 20px);
  background: var(--paper);
  color: var(--ink);
  border-bottom: calc(var(--px) * 1px) solid #000;
  display: flex; align-items: center;
  gap: calc(var(--px) * 6px);
  padding: 0 calc(var(--px) * 6px);
  line-height: 1;
  font-size: calc(var(--px) * 11px);
}

.menubar a{
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center;
  gap: calc(var(--px) * 3px);
  padding: calc(var(--px) * 1px) calc(var(--px) * 4px);
  border: calc(var(--px) * 1px) solid transparent;
}
.menubar a:hover, .menubar a:focus{ border-color:#000; }

.ui-link{
  border: calc(var(--px) * 1px) solid #000;
  padding: calc(var(--px) * 2px) calc(var(--px) * 6px);
  background: var(--paper);
  font-weight: 800;
}

/* ===========================
   Desktop icons (Finder used 32px)
   =========================== */
.dock{
  position: fixed;
  top: calc(var(--px) * 28px); /* 20px bar + 8px breathing room */
  left: calc(var(--px) * 10px);
  display: grid;
  gap: calc(var(--px) * 14px);
  z-index: 1;
}
.desk-icon{
  width: calc(var(--px) * 62px);
  text-align: center;
  filter: drop-shadow(calc(var(--px)*1px) calc(var(--px)*1px) 0 #000);
}
.desk-icon .glyph{
  width: calc(var(--px) * 48px);
  height: calc(var(--px) * 52px);
  margin: 0 auto calc(var(--px) * 4px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}
.icon-doc{ background-image: url("icons/doc.svg"); }

.desk-icon .label{
  display: inline-block;
  background: var(--paper);
  border: calc(var(--px) * 1px) solid #000;
  padding: calc(var(--px) * 2px) calc(var(--px) * 6px);
  font-size: calc(var(--px) * 15px); /* small */
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* ===========================
   Trash (bottom-right)
   =========================== */
.trash{
  position: fixed;
  right: calc(var(--px) * 14px);
  bottom: calc(var(--px) * 14px);
  width: calc(var(--px) * 56px);
  text-align: center;
  filter: drop-shadow(calc(var(--px)*1px) calc(var(--px)*1px) 0 #000);
}
.trash .glyph{
  width: calc(var(--px) * 32px);
  height: calc(var(--px) * 40px);
  margin: 0 auto;
  background: url("icons/trash.svg") center/contain no-repeat;
  image-rendering: pixelated;
}
.trash .label{
  display: inline-block; margin-top: calc(var(--px) * 4px);
  background: var(--paper);
  border: calc(var(--px) * 1px) solid #000;
  padding: calc(var(--px) * 2px) calc(var(--px) * 6px);
  font-size: calc(var(--px) * 15px);
  font-weight: 800; line-height: 1;
}
/* Language switch buttons (1-bit, Mac feel) */
.lang-switch { align-items: center; }
.lang-btn {
  appearance: none;
  background: #fff;
  border: 1px solid #000;
  padding: 1px 3px;
  line-height: 0;
  cursor: pointer;
}
.lang-btn svg {
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 #000);
}
.lang-btn:focus,
.lang-btn:hover {
  outline: none;
  box-shadow: inset 0 0 0 1px #000;
}

/* ===========================
   Window (thin 1px borders, 2px shadow)
   =========================== */
.window{
  position: absolute;
  top: 45%; left: 50%;

  width: min(calc(var(--px) * 480px), 84vw); /* classic-width */
  background: var(--paper);
  border: calc(var(--px) * 1px) solid #000;
  box-shadow: calc(var(--px) * 2px) calc(var(--px) * 2px) 0 #000;
}

/* Titlebar ~18px tall with 1px stripes */
.titlebar{
  display: grid;
  grid-template-columns: calc(var(--px) * 12px) 1fr calc(var(--px) * 28px);
  align-items: center;
  gap: calc(var(--px) * 2px);
  height: calc(var(--px) * 18px);
  padding: calc(var(--px) * 2px) calc(var(--px) * 4px);
  border-bottom: calc(var(--px) * 1px) solid #000;
  background:
    repeating-linear-gradient(
      0deg,
      #fff 0, #fff calc(var(--px) * 2px),
      #000 calc(var(--px) * 2px), #000 calc(var(--px) * 3px)
    );
}
.titlebar .title{
  background: var(--paper);
  border: calc(var(--px) * 1px) solid #000;
  padding: calc(var(--px) * 1px) calc(var(--px) * 6px);
  font-weight: 900;
  text-align: center;
  font-size: calc(var(--px) * 11px);
  line-height: 1;
}
.titlebar .grip{
  height: 100%;
  border: calc(var(--px) * 1px) solid #000;
  background:
    repeating-linear-gradient(
      90deg,
      #fff 0, #fff calc(var(--px) * 2px),
      #000 calc(var(--px) * 2px), #000 calc(var(--px) * 3px)
    );
}
.titlebar .ctl{
  display: grid; grid-auto-flow: column;
  gap: calc(var(--px) * 2px); justify-content: end;
}
.ctl .btn{
  width: calc(var(--px) * 10px);
  height: calc(var(--px) * 10px);
  border: calc(var(--px) * 1px) solid #000;
  background: var(--paper);
}

/* Body + status bar */
.content{
  min-height: calc(var(--px) * 140px);
  padding: calc(var(--px) * 8px);
  position: relative;
}
.statusbar{
  display: grid;
  grid-template-columns: calc(var(--px) * 12px) 1fr calc(var(--px) * 12px) calc(var(--px) * 12px);
  gap: calc(var(--px) * 2px);
  padding: calc(var(--px) * 2px);
  border-top: calc(var(--px) * 1px) solid #000;
  background: var(--paper);
}
.statusbar .box{
  border: calc(var(--px) * 1px) solid #000;
  height: calc(var(--px) * 12px);
  background: var(--paper);
}

/* responsive */
@media (max-width: 600px){
  :root{ --px: 1.1; } /* scale down a hair on phones */
  .dock{ left: calc(var(--px)*8px); gap: calc(var(--px)*12px); }
  .window{ width: 92vw; }
}