/* mirror.5i.fi — themed directory listing (dark server-room + fiber aqua) */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg:        #0E1116;
  --panel:     #161B22;
  --panel-2:   #1B222B;
  --hairline:  #232A33;
  --hairline-2:#2C353F;
  --text:      #E6EDF3;
  --muted:     #7D8792;
  --muted-dim: #59626C;
  --aqua:      #3FE0C8;
  --aqua-dim:  #1F6B62;
  --amber:     #F2A83B;
  --field:     #0F141A;
  --radius:    12px;

  --font-display: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Fiber-lit server-room backdrop (identical to the main site). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(63,224,200,0.07), transparent 60%),
    radial-gradient(760px 620px at -6% 108%, rgba(242,168,59,0.05), transparent 60%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 88%);
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }

/* Shell wraps the injected header, the fancyindex output and the footer. */
.mirror-shell { max-width: 1040px; margin: 0 auto; padding: 28px 24px 56px; }

/* Top bar */
.mirror-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
}
.brand .led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--aqua); box-shadow: 0 0 8px rgba(63,224,200,0.8);
}

/* Status button — the one call to action, so it gets the accent fill. */
.status-btn {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 600;
  color: var(--bg); background: var(--aqua); border: 1px solid var(--aqua);
  border-radius: 9px; padding: 8px 16px; white-space: nowrap;
  transition: filter .16s ease, transform .12s ease;
}
.status-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* fancyindex emits <h1>Index of /path/</h1> — style it as the path heading. */
h1 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem); letter-spacing: -0.01em;
  color: var(--text); margin: 32px 0 16px; word-break: break-all;
}
h1::before { content: "\276F"; color: var(--aqua); margin-right: 12px; font-weight: 600; }

/* The listing table (fancyindex uses table#list). */
table#list {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 13.5px;
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
}
#list thead th {
  text-align: left; padding: 11px 16px;
  background: var(--panel-2); border-bottom: 1px solid var(--hairline);
  font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
#list thead th a { color: var(--muted); }
#list thead th a:hover { color: var(--aqua); }
#list tbody td {
  padding: 9px 16px; border-bottom: 1px solid var(--hairline);
  background: var(--panel); white-space: nowrap;
}
#list tbody tr:last-child td { border-bottom: none; }
#list tbody tr:hover td { background: var(--panel-2); }

/* Name column stretches; size/date stay tight and right-aligned. */
#list td:first-child { width: 100%; }
#list td:nth-child(2), #list td:nth-child(3) { text-align: right; color: var(--muted); }

#list a { color: var(--text); transition: color .15s ease; }
#list a:hover { color: var(--aqua); }
#list a[href$="/"] { color: var(--aqua); }             /* directories */
#list a[href$="/"]::before { content: "/ "; color: var(--aqua-dim); }
#list a[href="../"] { color: var(--muted); }           /* parent dir */

/* Footer */
.mirror-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--muted);
}
.mirror-foot a:hover { color: var(--aqua); }

@media (max-width: 520px) {
  .mirror-top { flex-wrap: wrap; }
  #list { font-size: 12.5px; }
  #list td:nth-child(3) { display: none; }              /* drop date on narrow screens */
}
@media (prefers-reduced-motion: reduce) { .status-btn:hover { transform: none; } }