/* ==========================================================================
   Asset Vault — styled to mirror the default-web-pages gallery:
   dark, warm-charcoal palette with a coral accent, hero + search, grouped
   sections, and a card grid of 16:10 thumbnails with type tags.
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  /* warm charcoal palette, Chrome-dark inspired (matches default-web-pages) */
  --bg: #1f2225; --panel: #292c30; --input: #34383e; --line: #3a3f45;
  --fg: #c8ccd1; --mut: #979ca2; --accent: #e0654f;
  --img: #57b96c; --media: #d8a64c; --other: #b48cf0; /* type-tag colors */
  --radius: 12px; --maxw: 1400px;
  --pad: clamp(1rem, 4vw, 4rem);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); line-height: 1.55;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: .5rem; top: -3.5rem; z-index: 200;
  background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: 8px;
  font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: .5rem; }

/* ------------------------------------------------------------------- main */
.site-main {
  flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 1.5rem var(--pad) 3rem;
}

/* ------------------------------------------------------------------- hero */
.hero { padding: 2.5rem 0 .75rem; }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.hero h1 .hl { color: var(--accent); }
.hero p { margin: .25rem 0; color: var(--mut); max-width: 80ch; line-height: 1.55; }
.hero .links { margin-top: 1.1rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.hero .links a {
  display: inline-flex; align-items: center; gap: .45rem; color: var(--fg);
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  padding: .45rem .8rem; font-size: .9rem; transition: .15s;
}
.hero .links a:hover { border-color: var(--accent); color: var(--accent); }
.hero .links svg { display: block; }

/* --------------------------------------------------------------- toolbar */
.toolbar { display: flex; flex-direction: column; gap: .75rem; margin: 1.25rem 0 1.5rem; }
.breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  font-family: var(--font-mono); font-size: .88rem;
}
.breadcrumbs .crumb {
  display: inline-block; padding: .2rem .6rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--fg);
  white-space: nowrap; transition: .15s;
}
.breadcrumbs a.crumb:hover { border-color: var(--accent); color: var(--accent); }
.breadcrumbs .crumb.current { background: var(--input); border-color: transparent; color: var(--accent); font-weight: 600; }
.breadcrumbs .sep { color: var(--mut); }

.search {
  font-size: 1rem; padding: .7rem 1rem; width: 100%;
  color: var(--fg); background: var(--input);
  border: 1px solid var(--line); border-radius: 10px;
}
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,101,79,.3); }
.search::placeholder { color: var(--mut); }

/* --------------------------------------------------------- group headers */
.section-title {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mut);
  border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin: 2.25rem 0 1.5rem;
  display: flex; align-items: center; gap: .5rem; font-weight: 700;
}
.section-title .count {
  color: var(--fg); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 .55rem; font-size: .8rem; font-weight: 600;
}

/* ----------------------------------------------------------------- grids */
.grid-folders, .grid-assets { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .grid-folders, .grid-assets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-folders, .grid-assets { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------------------- cards */
.card {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit; transition: .15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.card .thumb-link { display: block; }

.thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* subtle checkerboard so transparent logos/icons read correctly */
  background-color: #25282c;
  background-image:
    linear-gradient(45deg, #2c3034 25%, transparent 25%),
    linear-gradient(-45deg, #2c3034 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2c3034 75%),
    linear-gradient(-45deg, transparent 75%, #2c3034 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.noshot { background: linear-gradient(135deg, #2f3338, #23262a); }
.thumb .ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; height: 100%; padding: 1rem; text-align: center;
}
.thumb .ph .ph-emoji { font-size: 2.6rem; line-height: 1; }
.thumb .ph .ph-name { font-family: var(--font-mono); font-weight: 600; font-size: .9rem; color: var(--fg); word-break: break-word; }

.cap {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem .9rem; border-top: 1px solid var(--line);
}
.cap .name {
  font-family: var(--font-mono); font-weight: 600; font-size: .92rem; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cap .metaright { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.cap .fcount { color: var(--mut); font-size: .78rem; white-space: nowrap; }

.tag {
  font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mut); border: 1px solid var(--line); border-radius: 999px;
  padding: .12rem .5rem; white-space: nowrap;
}
.tag.image  { color: var(--img); }
.tag.video, .tag.audio { color: var(--media); }
.tag.folder { color: var(--accent); }
.tag.other  { color: var(--other); }

/* file-card actions */
.actions { display: flex; gap: .4rem; padding: 0 .9rem .85rem; }
.actions .btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; padding: .42rem .4rem;
  min-height: 38px; color: var(--fg); background: var(--input);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: .15s; text-decoration: none;
}
.actions .btn:hover { border-color: var(--accent); color: var(--accent); }
.actions .btn.primary { background: rgba(224,101,79,.12); border-color: transparent; color: var(--accent); }
.actions .btn.primary:hover { border-color: var(--accent); }
.actions .btn.dl { flex: 0 0 auto; min-width: 2.5rem; }

/* --------------------------------------------------------- states, toast */
.loading, .empty { text-align: center; color: var(--mut); padding: 3rem 1rem; font-size: 1rem; }
.empty .big { font-size: 2.6rem; display: block; margin-bottom: .75rem; }

.toast {
  position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: 50%;
  transform: translate(-50%, 200%); opacity: 0; visibility: hidden;
  background: var(--panel); color: var(--fg); border: 1px solid var(--accent);
  font-family: var(--font-mono); font-size: .85rem; font-weight: 600;
  padding: .55rem 1.2rem; border-radius: 999px; box-shadow: 0 12px 32px rgba(0,0,0,.4);
  transition: transform .25s ease, opacity .25s ease, visibility .25s; z-index: 99;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- footer */
.site-footer {
  text-align: center; padding: 2rem var(--pad) 3rem;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--mut); font-size: .82rem; line-height: 1.5;
}
.footer-gh {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
  color: var(--mut); font-weight: 600; font-size: .8rem;
}
.footer-gh:hover { color: var(--accent); }
.footer-gh .octocat { display: block; }
.site-footer p { margin: 0; }
.site-footer p a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.site-footer p a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }