/* gharbor.net — root directory
   ghd-retro-style: 1-bit Mac desktop over a colored background.
   All styles for the root page live here. Nothing is shared. */

:root {
  --ink:     #000;
  --paper:   #fbf6ea;
  --paper-2: #efe7d3;

  /* Desktop background (blue-green-teal) */
  --sky:     #d6f1f1;
  --teal:    #5cc5c3;
  --deep:    #1c6181;
  --sun-hi:  #f3fffa;
  --sun-lo:  #2fb0a6;

  --font: Geneva, Verdana, Tahoma, "DejaVu Sans", "Bitstream Vera Sans", sans-serif;

  --dither-50: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  --dither-25: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
  --stripes:   repeating-linear-gradient(var(--ink) 0 1px, transparent 1px 2px);

  --shadow:    2px 2px 0 var(--ink);
  --menubar-h: 22px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 13px/1.35 var(--font);
  color: var(--ink);
  background: var(--deep);
  overflow: hidden;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
img { image-rendering: pixelated; }

/* ---------- Desktop ---------- */
.desktop {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, var(--teal) 48%, var(--deep) 100%);
}
.desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dither-25);
  opacity: .14;
  pointer-events: none;
}
.sun {
  position: absolute;
  left: 50%;
  bottom: -12vmin;
  width: 64vmin;
  height: 64vmin;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(var(--sun-hi), var(--sun-lo));
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 20px);
          mask: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 20px);
  pointer-events: none;
}

/* ---------- Menu bar (the site navigation) ---------- */
.menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--menubar-h);
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  z-index: 1000;
  font-weight: bold;
  user-select: none;
}
.menubar > .menus {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.menu { position: relative; }
.menu > .menu-label {
  display: flex;
  align-items: center;
  height: var(--menubar-h);
  padding: 0 10px;
  white-space: nowrap;
}
.menu > .menu-label.logo { padding: 0 12px; font-size: 15px; }
.menu > .menu-label:hover,
.menu.open > .menu-label {
  background: var(--ink);
  color: var(--paper);
}
.menu > .menu-label.logo:hover { background: var(--ink); }

/* A top-level item that is just a link (no dropdown) uses .menu-label on an <a> */
a.menu-label { text-decoration: none; }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 2px 0;
  font-weight: normal;
}
.menu.open .dropdown { display: block; }
.dropdown li { margin: 0; }
.dropdown a,
.dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 2px 18px 3px 14px;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown a:hover,
.dropdown button:hover {
  background: var(--ink);
  color: var(--paper);
}
.dropdown .sep {
  height: 0;
  margin: 3px 0;
  border-top: 1px dotted var(--ink);
}
.dropdown .disabled {
  opacity: .45;
  pointer-events: none;
}
.dropdown .check::before {
  content: "✓ ";
  display: inline-block;
  width: 14px;
  margin-left: -14px;
  visibility: hidden;
}
.dropdown .check.on::before { visibility: visible; }

.clock {
  display: flex;
  align-items: center;
  padding: 0 12px;
  white-space: nowrap;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}

/* ---------- Windows ---------- */
.window {
  position: absolute;
  top: 0; left: 0;
  transform: translate(var(--x), var(--y));
  width: var(--w, 420px);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  z-index: 10;
  animation: zoom-in .22s steps(5);
}
.window.active { z-index: 20; }
.window[hidden] { display: none; }
@keyframes zoom-in {
  from { transform: translate(var(--x), var(--y)) scale(.6); }
  to   { transform: translate(var(--x), var(--y)) scale(1); }
}

.titlebar {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ink);
  user-select: none;
  touch-action: none;
}
.window.active .titlebar {
  background: var(--stripes) center / 100% 12px no-repeat;
}
.titlebar .title {
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  padding: 0 6px;
  background: var(--paper);
  white-space: nowrap;
}
.closebox, .zoombox {
  position: absolute;
  top: 3px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper);
}
.closebox { left: 4px; }
.closebox:active { background: var(--dither-50); }
.zoombox { right: 4px; }
.zoombox::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 5px; height: 5px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.window .body { padding: 10px 12px; }

/* ---------- Directory table ---------- */
.list { overflow: auto; max-height: 46vh; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  font-weight: normal;
  text-align: left;
  padding: 4px 8px 5px;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
tbody td {
  padding: 4px 8px 5px;
  border-bottom: 1px dotted var(--ink);
  vertical-align: top;
}
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--ink); color: var(--paper); }
tbody tr:hover a { color: var(--paper); }
tbody tr.soon { cursor: default; }
tbody tr.soon:hover { background: none; color: inherit; }
tbody tr.soon td { opacity: .55; }
td.name { white-space: nowrap; }
td.name a { text-decoration: none; font-weight: bold; }
td.name a::before { content: "▸ "; }
td.kind, th.kind { white-space: nowrap; }
td.date, th.date {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Status bar ---------- */
.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 5px;
  border-top: 1px solid var(--ink);
  font-size: 12px;
}
.tag {
  background: var(--ink);
  color: var(--paper);
  padding: 1px 6px 2px;
  font-size: 11px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 3px 14px 4px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 1px 1px 0 var(--ink);
  text-decoration: none;
}
.btn:hover { background: var(--paper-2); }
.btn:active, .btn.pressed {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
  transform: translate(1px, 1px);
}

/* ---------- About window ---------- */
.about .body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.about .icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}
.about p + p { margin-top: 6px; }
.about .small { font-size: 11px; margin-top: 10px; }

/* ---------- Welcome / placeholder window ---------- */
.welcome .big {
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.welcome p + p { margin-top: 6px; }
.welcome .actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Scrollbar (WebKit) ---------- */
.list::-webkit-scrollbar { width: 16px; }
.list::-webkit-scrollbar-track {
  background: var(--dither-50);
  border-left: 1px solid var(--ink);
}
.list::-webkit-scrollbar-thumb {
  background: var(--paper);
  border: 1px solid var(--ink);
}

/* ---------- Boot screen ---------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.boot[hidden] { display: none; }
.boot .dialog {
  width: 300px;
  border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 16px;
  text-align: center;
  background: var(--paper);
}
.boot .glyph { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.boot .bar {
  margin-top: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  overflow: hidden;
}
.boot .bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: var(--dither-50);
  animation: fill 1.3s steps(14) forwards;
}
@keyframes fill { to { width: 100%; } }

/* ---------- CRT overlay ---------- */
.crt {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.09) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .window { animation: none; }
  .boot { display: none; }
}

/* ---------- Phone (≤ 700px) ---------- */
@media (max-width: 700px) {
  body { overflow: auto; }
  .desktop {
    height: auto;
    min-height: 100%;
    overflow: visible;
    padding: calc(var(--menubar-h) + 14px) 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .desktop::before { position: fixed; }
  .sun { position: fixed; z-index: -1; }
  .menubar { position: fixed; }
  .menubar .clock { display: none; }
  .window {
    position: relative;
    transform: none !important;
    width: auto;
    animation: none;
  }
  .window[hidden] { display: none; }
  .list { max-height: none; }
  td.date, th.date { display: none; }
  .titlebar { touch-action: auto; }
}