/* Hashling — dark, data-first, density with identity.
   Self-hosted fonts only: no Google Fonts request, so the page works offline
   and under a strict CSP. Tile art is generated from the address, so a project
   with no image still reads as itself. */

/* Oleo Script: the wordmark ONLY, subset to the eight glyphs in "Hashling"
   (2.2KB). A brush script reads warm and character-driven, which suits the
   name, and it's unmistakable next to the geometric sans every launchpad uses.
   It never touches UI text or contract addresses. */
/* Wordmark candidates, all subset to just the logo glyphs. Swap --display
   below to compare. Mogra: heavy, warm, holds at small sizes. Oleo Script:
   brush script, needs mixed case to flow. Mouse Memoirs: condensed glyphic,
   tightens up small. Oswald: neutral condensed grotesque, built for caps. */
@font-face {
  font-family: 'Mogra';
  src: url('fonts/Mogra-Wordmark.ttf?v=2') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oleo Script';
  src: url('fonts/OleoScript-Wordmark.ttf?v=2') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Mouse Memoirs';
  src: url('fonts/Mouse_Memoirs-Wordmark.ttf?v=2') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald Wordmark';
  src: url('fonts/Oswald-Wordmark.ttf?v=2') format('truetype');
  font-display: swap;
}

/* Geologica: everything else. Variable, so one file covers every weight. */
@font-face {
  font-family: 'Geologica';
  src: url('fonts/Geologica-Latin.ttf?v=2') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0b0d10;
  --panel: #14171c;
  --panel-2: #1b1f26;
  --line: #262c35;
  --text: #e8edf4;
  --muted: #8b95a4;
  --dim: #5e6875;

  --hatched: #6b7a8f;
  --bonding: #4a9eff;
  --near: #f2b544;
  --graduated: #46d17f;
  --unclassified: #6f5bd0;
  --flag: #ff6b5e;

  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Geologica', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: 'Mogra', Georgia, serif;   /* candidates: Mogra | Oleo Script | Mouse Memoirs | Oswald Wordmark */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------- sample banner */

.live-banner {
  background: #12261a;
  color: #7fe3a6;
  border-bottom: 1px solid #1e4030;
  text-align: center;
  padding: 7px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ header */

header {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  font-family: var(--display);
  font-weight: 400;
  /* Scripts read smaller than their point size: the x-height sits low and the
     ascenders eat the box, so it needs a bump to hold its own in the header.
     All caps also loses the connecting flow a script is drawn for, so it gets
     a touch of tracking back to stop the letters colliding. */
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  /* Mogra's glyphs ride high in the em box, so centring the boxes leaves the
     mark sitting visually low. Trim the line box and nudge the mark to match
     the optical centre of the letterforms rather than their metrics. */
  line-height: 1;
  gap: 12px;
}

.logo-mark {
  /* Cracked shell. Inline SVG so it scales, inherits the palette, and costs no
     request. The crack is its own path — it can widen with bonding progress
     later, letting one shape serve as logo, favicon, and status icon. */
  width: 30px;
  height: 38px;
  transform: translateY(-2px);
  flex-shrink: 0;
  overflow: visible;
}

.nav {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-left: 8px;
  font-size: 14px;
}

.nav a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="true"] { color: var(--text); border-bottom-color: var(--graduated); }

/* Kept for the hero; the header is navigation now. */
.hero-slogan {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graduated);
  margin: 0 0 8px !important;
}

.tagline {
  /* Sits beside a 40px wordmark, so it needs weight and air or it reads as a
     caption instead of the promise. */
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-left: 22px;
  margin-left: 10px;
  border-left: 1px solid var(--line);
  line-height: 1;
}

.search {
  margin-left: auto;
  flex: 1 1 260px;
  max-width: 420px;
}

.search input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}

.search input:focus { outline: none; border-color: var(--bonding); }
.search input::placeholder { color: var(--dim); font-family: var(--sans); }

/* ------------------------------------------------------------------ layout */

main { max-width: 1240px; margin: 0 auto; padding: 20px; }

.hero {
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.hero h1 {
  margin: 0 0 6px;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.hero p { margin: 0; color: var(--muted); max-width: 78ch; font-size: 15px; }

/* ------------------------------------------------------------------ filters */

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chip:hover { border-color: var(--dim); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--panel-2); color: var(--text); border-color: var(--dim); }
.chip .count { color: var(--dim); font-family: var(--mono); font-size: 11px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.dot.hatched { background: var(--hatched); }
.dot.bonding { background: var(--bonding); }
.dot.near_graduation { background: var(--near); }
.dot.graduated { background: var(--graduated); }
.dot.unclassified { background: var(--unclassified); }

.sort { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sort label { color: var(--dim); font-size: 12px; }

select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}

/* -------------------------------------------------------------------- board */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}

.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
  display: flex;
  flex-direction: column;
}

.tile:hover { border-color: var(--dim); transform: translateY(-1px); }

.tile-art {
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.tile-age {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(0,0,0,.55);
  color: #cfd6e0;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
}

.tile-badges {
  position: absolute;
  top: 6px; right: 6px;
  display: flex;
  gap: 4px;
}

.badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.badge.verified { background: rgba(70,209,127,.18); color: var(--graduated); }
.badge.flagged { background: rgba(255,107,94,.18); color: var(--flag); }

.tile-body { padding: 8px 9px 10px; }

.tile-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-symbol {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 7px;
}

.tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

.status-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }

.bar {
  height: 4px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}

.bar > span { display: block; height: 100%; background: var(--bonding); }
.bar.near > span { background: var(--near); }

.untouched { color: var(--dim); font-style: italic; }

/* ------------------------------------------------------------------ detail */

.back { color: var(--muted); font-size: 13px; display: inline-block; margin-bottom: 14px; }
.back:hover { color: var(--text); }

.detail-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }

.detail-art {
  width: 96px; height: 96px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 30px;
  color: rgba(255,255,255,.92);
  flex-shrink: 0;
}

.detail-title h1 { margin: 0 0 2px; font-size: 24px; letter-spacing: -0.02em; }
.detail-title .sym { font-family: var(--mono); color: var(--muted); }

.ca-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

.ca {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text);
  word-break: break-all;
}

.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
}

.btn:hover { border-color: var(--dim); }
.btn.copied { color: var(--graduated); border-color: var(--graduated); }

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.panel h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  font-weight: 600;
}

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; }

.flag-item {
  border-left: 2px solid var(--flag);
  padding: 8px 10px;
  background: rgba(255,107,94,.06);
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}

.flag-item strong { color: var(--flag); font-size: 12px; display: block; margin-bottom: 2px; }
.flag-item span { color: var(--muted); font-size: 12px; }

.note {
  color: var(--dim);
  font-size: 11px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.comment-locked {
  color: var(--muted);
  font-size: 13px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

.comment-locked b { color: var(--text); }

footer {
  max-width: 1240px;
  margin: 40px auto 0;
  padding: 18px 20px 40px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
}

.empty { color: var(--muted); padding: 40px; text-align: center; }

/* ------------------------------------------------------------- community */

.wallet-status { color: var(--muted); font-size: 12px; margin: 8px 0; min-height: 1em; }

.composer textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  padding: 9px 10px;
  resize: vertical;
}

.composer textarea:focus { outline: none; border-color: var(--bonding); }

.composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* Stake is share of supply, never a dollar value. */
.stake-badge {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--graduated);
  background: rgba(70,209,127,.12);
  border-radius: 5px;
  padding: 3px 7px;
}

.comment-list { margin-top: 12px; }

.comment {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.comment-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.comment-addr { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.comment-stake { font-size: 11px; color: var(--graduated); }
.comment-body { font-size: 13px; }

.coverage {
  margin-top: 10px !important;
  color: var(--dim);
  font-size: 12px;
  font-family: var(--mono);
}

/* Loud on purpose: a visitor who posts must not believe it published. */
.local-only {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px dashed var(--near);
  border-radius: 8px;
  color: var(--near);
  font-size: 12px;
}

/* ------------------------------------------------------------- coverage */

.gap-item {
  border-left: 2px solid var(--near);
  padding: 8px 10px;
  background: rgba(242,181,68,.06);
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}

.gap-item strong { color: var(--near); font-size: 12px; display: block; margin-bottom: 2px; }
.gap-item span { color: var(--muted); font-size: 12px; }