/* SPDX-License-Identifier: AGPL-3.0-or-later - The Hoard Wall */

.masthead {
  display: flex; align-items: baseline; gap: 1rem;
  max-inline-size: 1400px; margin-inline: auto;
  padding-block: 1.5rem 1rem;
  border-block-end: var(--edge);
}
.masthead h1 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: var(--step-3); margin: 0; letter-spacing: -0.01em;
  color: var(--foreground-bright);
}
.masthead .count {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted); margin-inline-start: auto;
}

/* The drawbridge: paste, drop, or prefix a URL. */
.drawbridge {
  max-inline-size: 1400px; margin: 1rem auto;
  display: flex; gap: .5rem;
}
.drawbridge input {
  flex: 1; padding: .7rem .9rem;
  background: var(--background-lighter); color: var(--foreground);
  border: var(--edge); border-radius: var(--radius);
  font-family: var(--font-ui); font-size: var(--step-0);
}
.drawbridge input::placeholder { color: var(--muted); }
.drawbridge input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.drawbridge button {
  padding: .7rem 1.2rem; cursor: pointer;
  background: var(--accent); color: var(--background-darker);
  border: 0; border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--step-0);
}

/* CSS masonry (grid-lanes) is Safari-only, so columns with an @supports
   upgrade rather than a layout that breaks on three of four engines. */
.wall {
  max-inline-size: 1400px; margin-inline: auto; padding-block: 1rem 4rem;
  columns: 4 260px; column-gap: 1rem;
}
.card {
  break-inside: avoid; margin-block-end: 1rem;
  display: block; text-decoration: none; color: inherit;
  background: var(--background-lighter);
  border: var(--edge); border-radius: var(--radius-lg);
  border-inline-start: 3px solid var(--card-edge, var(--muted));
  padding: .9rem 1rem;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.card:hover, .card:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadow);
  outline: none; border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.card h2 {
  font-family: var(--font-reading); font-variation-settings: normal;
  font-size: var(--step-0); line-height: var(--leading-tight);
  margin: 0 0 .4rem; color: var(--foreground-bright);
  text-wrap: balance;
}
.card .meta {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); text-transform: lowercase;
}
.card .sigil {
  color: var(--card-edge); font-weight: 500;
}
.card .excerpt {
  font-family: var(--font-reading); font-size: var(--step--1);
  line-height: 1.5; color: var(--foreground-dark);
  margin: .5rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.kind-link    { --card-edge: var(--kind-link); }
.kind-article { --card-edge: var(--kind-article); }
.kind-video   { --card-edge: var(--kind-video); }
.kind-pdf     { --card-edge: var(--kind-pdf); }
.kind-image   { --card-edge: var(--kind-image); }
.kind-note    { --card-edge: var(--kind-note); }

.empty {
  max-inline-size: var(--measure); margin: 4rem auto; text-align: center;
  color: var(--muted); font-family: var(--font-reading);
}
.empty .big { font-family: var(--font-display); font-size: var(--step-2); color: var(--foreground-dark); }

.flash {
  max-inline-size: 1400px; margin: .5rem auto 0; padding: .6rem .9rem;
  background: color-mix(in oklab, var(--accent) 14%, var(--background-lighter));
  border: var(--edge); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--step--1);
}

/* A failed extraction must look deliberate, not like a blank bug. */
.card .ribbon {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--orange); margin: .4rem 0 0;
}

/* Runes: what a treasure is about, at a glance. */
.card .runes { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.rune {
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  padding: .12rem .45rem; border-radius: 999px;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
}
.rune-lang {
  font-variant: small-caps; letter-spacing: .04em;
  color: var(--foreground-dark);
}
.drawbridge.seek input { background: var(--background-dark); }
.drawbridge.seek button, .drawbridge.seek input[type=submit] {
  background: transparent; color: var(--accent);
  border: var(--edge); border-radius: var(--radius);
  padding: .7rem 1.2rem; cursor: pointer; font-weight: 600;
}