@import url("/static/fonts/spacemono.css");

/* theme.css — layered glassmorphism:
   (1) animated cyan/yellow gradient + green/pink birds  [#vanta-bg]
   (2) full-screen glass overlay that blurs & darkens it  [#bg-overlay]
   (3) file/dir panels = a darker second glass layer on top
   Text is Space Mono, white. */

:root {
  --ink: #ffffff;

  --overlay-bg:   rgba(0, 0, 0, 0.22);
  --overlay-blur: 8px;

  --panel-bg:     rgba(20, 44, 34, 0.28);   /* dark green-tinted glass (clearer) */
  --panel-bg-2:   rgba(24, 52, 40, 0.40);
  --pink:         rgba(243, 160, 244, 0.62);
  --pink-edge:    rgba(255, 205, 250, 0.95);
  --glass-green:  #2e5a45;   /* dark green matching the panels (breadcrumb divider) */
  --panel-border: rgba(255, 255, 255, 0.20);
  --panel-blur:   9px;
  --radius:       18px;
  --shadow:       0 8px 32px rgba(0, 0, 0, 0.35);

  /* Neutralize Pico's blue accents. */
  --pico-primary: var(--ink);
  --pico-primary-background: rgba(255, 255, 255, 0.14);
  --pico-primary-hover-background: rgba(255, 255, 255, 0.26);
  --pico-primary-border: var(--panel-border);
  --pico-primary-inverse: var(--ink);

  --pico-font-family: "Space Mono", ui-monospace, monospace;
  --pico-color: var(--ink);
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  position: relative;
  overflow-x: hidden;
}

/* ---- Layer 1: animated cyan/yellow gradient + birds canvas -------------- */
#vanta-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(120deg, #00d4ff, #ffd700, #00d4ff);
  background-size: 200% 200%;
  animation: gradient-pan 18s ease infinite;
}

@keyframes gradient-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Background glass overlay removed — the cyan/yellow is darkened at the source
   via the Vanta canvas backgroundColor instead (see vanta-bg.js). */
/* Sunbeam: a broad shaft of light like a large ceiling window — wide, bright at
   the top, fading much weaker toward the bottom. The vertical gradient does the
   top→bottom falloff; the horizontal mask gives the wide shaft with soft sides.
   Sits above the birds (z -2), below content (z 0). */
/* The sunbeam is now a 3D object inside the birds' scene (see vanta-bg.js), so it
   shares the camera transform. This overlay element is no longer used. */
#bg-overlay { display: none; }

@media (prefers-reduced-motion: reduce) {
  #vanta-bg { animation: none; }
}

/* ---- Layer 3: panels = darker second glass layer ----------------------- */
.glass,
article {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

h1, h2, h3, p, label, a, span, td, th, li { color: var(--ink); }
/* Bold Space Mono everywhere (incl. form controls, which don't inherit weight). */
h1, h2, h3, h4, h5, h6, p, a, span, label, li, td, th,
button, input, textarea, select { font-weight: 700; }

.center { text-align: center; }
.narrow { max-width: 26rem; margin-inline: auto; }

/* Password / login (and upload) pages: vertically center the panel and give it
   breathing room; tone down the oversized heading + icon. */
main.container:has(article.narrow) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
article.narrow { padding: 2.75rem 2.5rem; }
article.narrow h1 {
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
}
.error  { color: #ff9b9b; font-weight: 700; }
.success{ color: #9ef0b0; font-weight: 700; }
.muted  { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }

/* ---- Form controls (glass, white text) --------------------------------- */
input, textarea, select {
  background: rgba(20, 44, 34, 0.45) !important;          /* dark green glass */
  border: 1px solid rgba(150, 220, 190, 0.28) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
/* Mask a plain text field like a password (avoids Chromium's save-password prompt). */
.masked { -webkit-text-security: disc; text-security: disc; }
input:focus, textarea:focus, select:focus {
  background: var(--pink) !important;                     /* field fills pink on focus */
  color: #2a0a2a !important;                              /* dark text for contrast */
  border-color: var(--pink-edge) !important;
  box-shadow: 0 0 0 3px rgba(243, 160, 244, 0.28), 0 0 18px rgba(243, 160, 244, 0.45) !important;
}
input:focus::placeholder, textarea:focus::placeholder { color: rgba(42, 10, 42, 0.6); }

/* ---- Buttons (glass) --------------------------------------------------- */
button, [type="submit"], [type="button"], [role="button"], a[role="button"] {
  background: rgba(20, 44, 34, 0.55) !important;          /* dark green glass */
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(150, 220, 190, 0.28) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
button:hover, [type="submit"]:hover, [role="button"]:hover, a[role="button"]:hover {
  background: var(--pink) !important;                     /* turns pink on hover */
  border-color: var(--pink-edge) !important;
  color: #2a0a2a !important;
  box-shadow: 0 0 22px rgba(243, 160, 244, 0.7) !important;
  transform: translateY(-1px);
}

/* Form panels (password prompt, upload, clipboard): hovering/focusing anywhere
   in the panel tints the WHOLE panel pink — no green. The active field/button is
   solid bright pink; the other controls become darker pink (magenta). */
.glass:has(form):hover,
.glass:has(form):focus-within {
  background: rgba(120, 22, 82, 0.50) !important;          /* dark magenta panel */
  border-color: var(--pink-edge) !important;
}
.glass:has(form):hover :is(input, textarea, button, [type="submit"]),
.glass:has(form):focus-within :is(input, textarea, button, [type="submit"]) {
  background: rgba(46, 22, 40, 0.45) !important;           /* dark muted magenta (matches the green's depth) */
  border-color: rgba(243, 160, 244, 0.45) !important;
  color: #fff !important;
}
.glass:has(form) input:focus,
.glass:has(form) textarea:focus,
.glass:has(form) button:hover,
.glass:has(form) [type="submit"]:hover {
  background: var(--pink) !important;                      /* the active control: solid pink */
  border-color: var(--pink-edge) !important;
  color: #2a0a2a !important;
}

/* ---- Breadcrumbs / links ----------------------------------------------- */
nav[aria-label="breadcrumb"] { margin-bottom: 1rem; }
.grid-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.zip-btn { white-space: nowrap; padding: 0.5rem 0.95rem !important; font-size: 0.85rem; text-decoration: none; }

/* Download progress panel (right side, dark-green glass). */
#dl-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 86vw;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  color: var(--ink);
  background: rgba(20, 44, 34, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-left: 1px solid var(--panel-border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
}
#dl-panel .dl-title { font-size: 0.95rem; word-break: break-all; }
#dl-panel .dl-cancel { width: 100%; padding: 0.5rem !important; font-size: 0.85rem; }
#dl-panel .dl-bar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
#dl-panel .dl-fill { height: 100%; width: 0; background: var(--pink); transition: width 0.2s ease; }
#dl-panel .dl-stat { font-size: 0.8rem; opacity: 0.85; }
#dl-panel .dl-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
#dl-panel .dl-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 8px; font-size: 0.8rem; }
#dl-panel .dl-list li .dl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dl-panel .dl-list li .dl-size { opacity: 0.7; white-space: nowrap; }
#dl-panel .dl-list li.active { background: var(--pink); color: #2a0a2a; }
#dl-panel .dl-list li.done .dl-name { opacity: 0.5; }
nav[aria-label="breadcrumb"] a,
nav[aria-label="breadcrumb"] a:hover,
nav[aria-label="breadcrumb"] a:focus {
  color: #fff;
  text-decoration-color: #fff;   /* underline stays white on hover, not dark blue */
}
nav[aria-label="breadcrumb"] {
  --pico-muted-color: var(--glass-green);   /* the ">" divider in the panel green */
}
a { color: var(--ink); }

/* ---- File / repo grid -------------------------------------------------- */
/* Grid pages use a wide container (fills the screen, but keeps side margins). */
main.container:has(.files) {
  max-width: min(1400px, 82vw);   /* wider side margins */
}
/* Phones / narrow screens: use almost the full width, tiny side margins. */
@media (max-width: 700px) {
  main.container:has(.files) { max-width: 100%; padding-inline: 0.6rem; }
}

/* Fixed, responsive file/dir block sizes (common breakpoints). */
:root { --tile: 230px; --tile-h: 205px; }
@media (max-width: 1200px) { :root { --tile: 195px; --tile-h: 180px; } }
@media (max-width: 760px)  { :root { --tile: 150px; --tile-h: 150px; } }

.files {
  display: grid;
  /* grid.js sets the COLUMN COUNT (~√items, capped to what fits); --tile is the
     fixed, responsive COLUMN SIZE. All leftover space goes to even margins. */
  grid-auto-rows: var(--tile-h);
  justify-content: space-evenly;
  align-content: space-evenly;
  gap: 2.5rem;
  margin-top: 1.5rem;
  min-height: 70vh;
}

.file {
  margin: 0;
  padding: 0;
  background: rgba(26, 54, 42, 0.30);          /* green-tinted glass */
  border-color: rgba(150, 220, 190, 0.22);
  box-shadow: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  animation: glass-in 0.5s ease both;          /* fade in on appearance */
}
.file:hover {
  transform: translateY(-4px);
  background: rgba(243, 160, 244, 0.62);        /* whole tile turns pink */
  border-color: rgba(255, 205, 250, 0.95);
  box-shadow: 0 0 24px rgba(243, 160, 244, 0.75); /* pink glow */
}

@keyframes glass-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* gentle stagger for the first several tiles */
.file:nth-child(2) { animation-delay: .05s; }
.file:nth-child(3) { animation-delay: .10s; }
.file:nth-child(4) { animation-delay: .15s; }
.file:nth-child(5) { animation-delay: .20s; }
.file:nth-child(6) { animation-delay: .25s; }
.file:nth-child(7) { animation-delay: .30s; }
.file:nth-child(8) { animation-delay: .35s; }
.file:hover a,
.file:hover .name,
.file:hover .icon { color: #2a0a2a; }            /* dark text/icon for contrast on pink */
.file a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* center content vertically in the larger tile */
  gap: 0.7rem;
  height: 100%;
  padding: 1rem 0.85rem;
  text-decoration: none;
  color: var(--ink);
  word-break: break-word;
  text-align: center;
}
.file .icon { color: var(--ink); line-height: 0; }
.file .icon svg { width: 46px; height: 46px; display: block; }
.file .name { font-size: 0.95rem; word-break: break-word; }

/* Inline lock icon used on login headings (same minimalist set as file icons). */
.lock-icon { display: inline-flex; vertical-align: -0.18em; }
.lock-icon svg { width: 1.1em; height: 1.1em; }