/* annex.css — the machine wing. Darker than the main building, same DNA. */

:root {
  --an-bg: #0e1116;
  --an-bg2: #151a21;
  --an-card: #1a2029;
  --an-line: #2a3240;
  --an-text: #e6e9ee;
  --an-dim: #8b95a5;
  --an-blue: #1f8ac0;      /* Rametric brand blue */
  --an-green: #3cf07a;     /* phosphor accent */
  --an-amber: #ffb000;
  --an-red: #e05555;
}

body.annex {
  background-color: var(--an-bg);
  color: var(--an-text);
}

body.annex .navbar { background-color: #0a0d11; }
body.annex .navbar .logo a { color: var(--an-text); }
body.annex .nav-links a { color: var(--an-dim); }
body.annex .nav-links a:hover { color: var(--an-green); }
body.annex footer { background-color: #0a0d11; color: var(--an-dim); }

@media (max-width: 640px) {
  body.annex .navbar { flex-wrap: wrap; row-gap: 8px; }
  body.annex .nav-links { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  body.annex .nav-links li { margin-left: 0; }
  body.annex .nav-links li + li { margin-left: 14px; }
}

/* ------------------------------------------------------------- hero ---- */

.an-hero {
  padding: 110px 20px 90px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% -10%, rgba(31, 138, 192, 0.28), transparent),
    var(--an-bg);
  border-bottom: 1px solid var(--an-line);
}

.an-hero .statusline {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  color: var(--an-green);
  font-size: 0.85rem;
  margin-bottom: 26px;
  text-shadow: 0 0 8px rgba(60, 240, 122, 0.45);
}
.an-hero .statusline::before { content: '$ '; opacity: 0.6; }
.an-hero .statusline .cursor {
  display: inline-block; width: 0.55em; height: 1em;
  background: var(--an-green); vertical-align: -0.15em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.an-hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.an-hero h1 .tick { color: var(--an-green); }

.an-hero .tagline {
  max-width: 640px;
  margin: 0 auto 30px;
  color: var(--an-dim);
  font-size: 1.1rem;
}
.an-hero .tagline strong { color: var(--an-text); }

.an-hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.an-hero .ghost { border: 1px solid var(--an-line); color: var(--an-text); padding: 12px 25px; border-radius: 5px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.an-hero .ghost:hover { border-color: var(--an-green); color: var(--an-green); transform: scale(1.05); }

/* --------------------------------------------------------- sections ---- */

.an-section { padding: 70px 20px; border-bottom: 1px solid var(--an-line); }
.an-section:nth-of-type(even) { background: var(--an-bg2); }
.an-section > h2 {
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.an-section > .an-sub {
  text-align: center;
  color: var(--an-dim);
  max-width: 640px;
  margin: 0 auto 44px;
}

/* gallery */
#gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.piece-card {
  background: var(--an-card);
  border: 1px solid var(--an-line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.piece-card:hover {
  transform: translateY(-6px);
  border-color: var(--an-blue);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.piece-canvas { display: block; width: 100%; height: auto; }
.piece-meta { padding: 18px 18px 20px; }

.piece-head {
  display: flex; justify-content: space-between;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--an-dim); margin-bottom: 8px;
}
.piece-seed { color: var(--an-green); }

.piece-meta h3 { font-size: 1.25rem; margin-bottom: 8px; }
.piece-blurb { font-size: 0.9rem; color: var(--an-dim); min-height: 3.2em; margin-bottom: 16px; }

.piece-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.piece-price { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--an-amber); }
.piece-actions { display: flex; gap: 8px; }

.buy-btn { background-color: var(--an-blue); font-size: 0.78rem; padding: 10px 16px; }
.buy-btn:hover:not(:disabled) { background-color: #166994; }
.buy-await { background-color: #232a35; color: var(--an-dim); cursor: not-allowed; }
.buy-await:hover { transform: none; }

.ghost-btn {
  background: transparent;
  border: 1px solid var(--an-line);
  color: var(--an-text);
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ghost-btn:hover { border-color: var(--an-green); color: var(--an-green); }

/* studio */
.studio-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 36px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 800px) { .studio-wrap { grid-template-columns: 1fr; } }

#studio-canvas {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--an-line); border-radius: 10px;
  background: #000;
}

.studio-controls { display: flex; flex-direction: column; gap: 18px; }
.studio-controls label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--an-dim); display: block; margin-bottom: 6px; }
.studio-controls select, .studio-controls input {
  width: 100%; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--an-line); background: var(--an-card); color: var(--an-text);
  font-family: inherit;
}
.seed-row { display: flex; gap: 8px; }
.seed-row input { flex: 1; }
#studio-dice {
  padding: 10px 14px; border-radius: 6px; border: 1px solid var(--an-line);
  background: var(--an-card); color: var(--an-text); cursor: pointer; font-size: 1rem;
}
#studio-dice:hover { border-color: var(--an-green); }

#studio-seed-value { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--an-green); font-size: 0.85rem; }

.studio-note { color: var(--an-dim); font-size: 0.85rem; line-height: 1.5; }

/* ledger */
.ledger-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; max-width: 1000px; margin: 0 auto 40px;
}
.ledger-cell {
  background: var(--an-card); border: 1px solid var(--an-line); border-radius: 10px;
  padding: 22px; text-align: center;
}
.ledger-cell .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--an-dim); margin-bottom: 8px; }
.ledger-cell .v { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.6rem; }
.ledger-cell .v.neg { color: var(--an-red); }
.ledger-cell .v.pos { color: var(--an-green); }

.ledger-table-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ledger-table th, .ledger-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--an-line); }
.ledger-table th { color: var(--an-dim); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.1em; }
.ledger-table td.num { font-family: ui-monospace, Menlo, Consolas, monospace; text-align: right; white-space: nowrap; }

.tip-row { text-align: center; margin-top: 34px; }
.tip-row .button { background-color: var(--an-amber); color: #14100a; }
.tip-row .button:hover:not(:disabled) { background-color: #e09e00; }
.tip-row .button:disabled { background-color: #232a35; color: var(--an-dim); cursor: not-allowed; }

/* terminal */
.term {
  max-width: 860px; margin: 0 auto;
  border: 1px solid var(--an-line); border-radius: 10px;
  background: #050805; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  background: #0d120d; border-bottom: 1px solid #1b241b;
  padding: 9px 14px; font-size: 0.78rem; color: #6f7f6f;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.term-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.term-bar .dot.r { background: #ff5f57; } .term-bar .dot.y { background: #febc2e; } .term-bar .dot.g { background: #28c840; }
.term-bar .title { margin-left: 8px; }

.term-body {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 0.88rem; line-height: 1.55;
  padding: 16px; height: 380px; overflow-y: auto; color: #b8f5c9;
}
.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line a { color: var(--an-green); text-decoration: underline; }
.term-dim { color: #5e8a6a; }
.term-err { color: #ff9d76; }
.term-prompt { color: #3cf07a; font-weight: bold; }

.term-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; }
.term-input-row .term-prompt { font-size: 0.88rem; }
.term-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #d7ffe1; font: inherit; caret-color: #3cf07a;
}

/* annex footer bits */
.an-foot-note { font-size: 0.8rem; line-height: 1.6; }
.an-foot-note a { color: var(--an-blue); }
.annex-tag { color: var(--an-green); font-size: 0.75em; font-family: ui-monospace, Menlo, Consolas, monospace; }