/* DADA — monochrome prototype. Light-only by design (matches the mockup). */
:root {
  --ink:    #141414;   /* near-black text / fills */
  --ink-2:  #3a3a3a;
  --muted:  #8a8a8a;   /* secondary text */
  --faint:  #b8b8b8;
  --line:   #e6e6e6;   /* hairline borders */
  --bg:     #ffffff;   /* page */
  --panel:  #fafafa;   /* subtle fills (avatars, inputs) */
  --card:   #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- header ---------- */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.4rem 1.5rem 0.4rem;
}
.wordmark { grid-column: 2; margin: 0; text-align: center; }
.wordmark a {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;            /* balance trailing letter-spacing */
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.hdr-side { grid-column: 3; justify-self: end; font-size: 0.8rem; }
.lang-switch a, .lang-switch span { margin-left: 0.5rem; text-decoration: none; color: var(--muted); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch .active { color: var(--ink); font-weight: 600; }

main { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem 3rem; }
footer { padding: 2rem 1.5rem; text-align: center; color: var(--faint); font-size: 0.8rem; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 1rem;
  min-height: 300px;
  margin: 0.5rem 0 2.2rem;
}
.hero-label {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.4rem;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.hero-label .rule { width: 28px; height: 1px; background: var(--muted); display: inline-block; }
.poem { margin: 0 0 1.4rem; }
.poem p {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-sub { margin: 0; color: var(--faint); font-size: 0.92rem; line-height: 1.7; }
.hero-art { align-self: center; }
.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  /* placeholder art cut from the PDF — replace with final asset later */
  mix-blend-mode: multiply;
}

/* ---------- columns ---------- */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* ---------- feed ---------- */
.feed-count { margin: 0 0 1.1rem; font-size: 1.02rem; font-weight: 600; }
.feed-count #feed-total { color: var(--ink); }

.feed-controls {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.tabs { display: inline-flex; gap: 0.35rem; }
.tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.search { position: relative; flex: 1 1 200px; max-width: 280px; }
.search-icon {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; fill: none; stroke: var(--faint); stroke-width: 2;
  stroke-linecap: round; pointer-events: none;
}
#feed-search {
  width: 100%;
  padding: 0.5rem 0.7rem 0.5rem 2.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font: inherit; font-size: 0.88rem;
}
#feed-search:focus { outline: none; border-color: var(--ink-2); background: #fff; }
#feed-search::placeholder { color: var(--faint); }

/* voice rows */
.voice-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.voice-item:first-child { border-top: none; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 600; color: #fff;
  flex: none; user-select: none;
}
.v-id { min-width: 0; }
.v-name { font-size: 0.92rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-time { font-size: 0.76rem; color: var(--faint); margin-top: 1px; }

.v-player { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.play-btn {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: background .15s, border-color .15s;
}
.play-btn:hover { border-color: var(--ink); }
.play-btn.is-playing { background: var(--ink); color: #fff; border-color: var(--ink); }
.play-btn svg { width: 12px; height: 12px; fill: currentColor; }
.wave { flex: 1 1 auto; min-width: 60px; height: 34px; }
.v-dur { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

.report-btn {
  border: none; background: none; color: var(--faint);
  font-size: 0.72rem; cursor: pointer; padding: 0; margin-left: 0.2rem;
}
.report-btn:hover { color: var(--ink); text-decoration: underline; }

.feed-empty { color: var(--muted); text-align: center; padding: 2rem 0; }

/* pagination */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 0.3rem; margin-top: 1.2rem; flex-wrap: wrap;
}
.pagination button {
  min-width: 34px; height: 34px; padding: 0 0.6rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 8px; cursor: pointer; font-size: 0.85rem;
}
.pagination button:hover:not(:disabled) { border-color: var(--ink); }
.pagination button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination button:disabled { color: var(--faint); cursor: default; }
.pagination .ellipsis { color: var(--faint); padding: 0 0.2rem; }
/* admin pager uses <a>/<strong> instead of <button> */
.pagination a, .pagination strong {
  min-width: 34px; height: 34px; padding: 0 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 8px; font-size: 0.85rem; text-decoration: none;
}
.pagination a:hover { border-color: var(--ink); }
.pagination strong { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- recorder ---------- */
.recorder-card h2 { margin: 0 0 1rem; font-size: 1.02rem; font-weight: 600; }
#rec-name {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 0.9rem;
}
#rec-name:focus { outline: none; border-color: var(--ink-2); background: #fff; }
#rec-name::placeholder { color: var(--faint); }

.mic-wrap { text-align: center; padding: 1.6rem 0 0.4rem; }
.mic {
  width: 92px; height: 92px; border-radius: 50%;
  border: none; background: var(--ink); color: #fff;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: transform .12s, box-shadow .2s;
}
.mic:hover { transform: translateY(-1px); }
.mic .mic-icon {
  width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.mic.is-recording { animation: micpulse 1.4s ease-out infinite; }
@keyframes micpulse {
  0%   { box-shadow: 0 0 0 0 rgba(20,20,20,.28); }
  70%  { box-shadow: 0 0 0 18px rgba(20,20,20,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,20,20,0); }
}
.mic-prompt { margin: 1rem auto 0; max-width: 16rem; color: var(--muted); font-size: 0.84rem; }

.rec-actions { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.btn-ghost, .btn-solid {
  flex: 1; padding: 0.6rem 0.9rem; border-radius: 10px; font: inherit;
  font-size: 0.88rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.btn-ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-solid { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.btn-solid:hover { background: #000; }
.btn-ghost:disabled, .btn-solid:disabled { opacity: 0.45; cursor: not-allowed; }
.tri {
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}

/* ---------- admin panel (shares the monochrome theme) ---------- */
.stats ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: var(--muted); font-size: 0.9rem; }
.muted { color: var(--muted); }
.voice-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 1rem;
  margin-bottom: 0.85rem; background: var(--card);
}
.voice-card .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem;
  font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem;
}
.voice-card .meta strong { color: var(--ink); }
.voice-card audio { width: 100%; margin: 0.4rem 0; }
.voice-card .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.voice-card .actions form { margin: 0; display: inline; }
.voice-card .actions button {
  padding: 0.4rem 0.9rem; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); border-radius: 8px; cursor: pointer; font-size: 0.85rem;
}
.voice-card .actions button:hover { border-color: var(--ink); }
.iph { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--faint); }
blockquote { margin: 0.5rem 0; padding-left: 0.75rem; border-left: 3px solid var(--line); color: var(--muted); }

/* ---------- QR footer (tiny technical link to the page's QR png) ---------- */
.qr-footer { text-align: center; padding: 2rem 1.5rem; }
.qr-footer a { color: var(--faint); font-size: 0.72rem; letter-spacing: 0.06em; text-decoration: none; }
.qr-footer a:hover { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 460px; margin: 0 auto; }
  .poem p { font-size: 1.45rem; }
  .columns { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  main { padding: 0 1rem 2rem; }
  .card { padding: 1.1rem; }
  .feed-controls { gap: 0.6rem; }
  .search { max-width: none; }
}