/* ─── reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
html, body { height: 100%; }
body {
  font-family: Georgia, "Cambria", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  font-size: 17px;
  line-height: 1.5;
  background: #070e08;
  color: #cfd8c6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(61,107,74,0.3); color: #cfd8c6; }
::placeholder { color: rgba(126,148,128,0.45); opacity: 1; }

/* ─── skip link / a11y ───────────────────────────────────────────── */
.skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
  position: fixed; left: .5rem; top: .5rem; width: auto; height: auto;
  padding: .5rem .75rem; background: #162819; color: #cfd8c6; z-index: 50;
}

/* ─── layout ─────────────────────────────────────────────────────── */
main {
  position: relative;
  max-width: 60ch;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}
@media (min-width: 640px) { main { padding: 5rem 1.25rem; } }

/* ─── animated mist background ───────────────────────────────────── */
.bg-pattern { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.bg-blob-1 { width: 55vw; height: 55vw; opacity: .055;
  background: radial-gradient(circle, #4a7c55 0%, transparent 70%);
  top: 15%; left: -8%; animation: blob1 30s ease-in-out infinite; }
.bg-blob-2 { width: 48vw; height: 48vw; opacity: .045;
  background: radial-gradient(circle, #3a6040 0%, transparent 70%);
  bottom: 5%; right: -6%; animation: blob2 38s ease-in-out infinite; }
.bg-blob-3 { width: 36vw; height: 36vw; opacity: .035;
  background: radial-gradient(circle, #567858 0%, transparent 70%);
  top: 55%; left: 38%; animation: blob3 24s ease-in-out infinite; }
@keyframes blob1 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(24px,-32px) scale(1.06)} 70%{transform:translate(-16px,18px) scale(.97)} }
@keyframes blob2 { 0%,100%{transform:translate(0,0) scale(1)} 35%{transform:translate(-20px,28px) scale(1.04)} 65%{transform:translate(18px,-16px) scale(.98)} }
@keyframes blob3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14px,20px) scale(1.03)} }

/* ─── typography ─────────────────────────────────────────────────── */
.wordmark { font-size: 1.125rem; letter-spacing: .1em; color: #7e9480; }
.cycle-tag {
  color: rgba(126,148,128,.28);
  font-weight: normal;
  font-size: .92em;
  letter-spacing: .08em;
  margin-left: .35em;
}
.dawn-header { margin-bottom: 2.5rem; }
.dawn-header .closing { display: block; margin-top: .5rem; font-size: .875rem; color: rgba(126,148,128,.5); }
.muted { color: rgba(126,148,128,.6); font-size: .875rem; }
.muted strong, .muted .accent { color: #dde8d4; font-weight: normal; }
.faded { color: rgba(126,148,128,.4); font-size: .75rem; }
.label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(126,148,128,.4); }
.error-text { color: #c9a97a; font-size: .875rem; }
.counter-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .5rem;
  font-size: .75rem;
  color: rgba(126,148,128,.5);
}
.word-counter {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.word-counter.over { color: #d4a045; }

.submit-error {
  margin-top: .75rem;
  padding: .65rem .9rem;
  background: rgba(212,160,69,.08);
  border-left: 2px solid rgba(212,160,69,.6);
  color: #d4a045;
  font-size: .85rem;
}
.submit-error[hidden] { display: none; }

/* ─── form ───────────────────────────────────────────────────────── */
.poem-form { margin: 0; }
.honeypot { display: none !important; }

/* Fixed-size textarea with native scrollbar */
.poem-input {
  display: block;
  width: 100%;
  height: 50vh;
  background: #111f15;
  color: #dde8d4;
  border: 1px solid #1c2e1f;
  outline: none;
  padding: 1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  caret-color: #3d6b4a;
}
.poem-input:focus { border-color: rgba(61,107,74,.55); }
.poem-input.over { border-color: rgba(212,160,69,.75); }
.poem-input::-webkit-scrollbar { width: 8px; }
.poem-input::-webkit-scrollbar-track { background: transparent; }
.poem-input::-webkit-scrollbar-thumb { background: rgba(126,148,128,.25); border-radius: 4px; }
.poem-input::-webkit-scrollbar-thumb:hover { background: rgba(126,148,128,.4); }

.line-input {
  display: block;
  width: 100%;
  background: transparent;
  color: #dde8d4;
  border: 0;
  border-bottom: 1px solid #1c2e1f;
  outline: none;
  padding: .5rem 0;
  font-family: inherit;
  font-size: .875rem;
  caret-color: #3d6b4a;
  box-sizing: border-box;
}
.line-input:focus { border-bottom-color: rgba(61,107,74,.6); }

.code-input {
  width: 12rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  letter-spacing: .35em;
  text-align: center;
  text-indent: .35em; /* visually centers content because trailing letter-spacing pushes left */
  padding: .5rem 0;
}
.code-input::placeholder {
  color: rgba(126,148,128,.28);
}

/* ─── button ─────────────────────────────────────────────────────── */
.row-end { display: flex; justify-content: flex-end; margin-top: 1rem; }
.btn {
  padding: .5rem 1.25rem;
  background: transparent;
  border: 1px solid rgba(61,107,74,.4);
  color: #7e9480;
  font-size: .875rem;
  transition: color .15s, border-color .15s;
  -webkit-appearance: none; appearance: none;
}
.btn:hover { border-color: #3d6b4a; color: #cfd8c6; }
.btn:focus-visible { outline: 1px solid #3d6b4a; outline-offset: 1px; }
.btn:disabled { opacity: .5; cursor: wait; }

/* ─── steps ──────────────────────────────────────────────────────── */
.step { display: flex; flex-direction: column; gap: 2rem; }
.step .group { display: flex; flex-direction: column; gap: .25rem; }
.step .prize-line { font-size: .75rem; color: rgba(126,148,128,.4); }
.status-link-block {
  border-top: 1px solid #1c2e1f;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.status-link { color: #a8bda0; word-break: break-all; font-size: .875rem; }

/* ─── status page ─────────────────────────────────────────────────── */
.status-list { display: flex; flex-direction: column; gap: 1rem; }
.status-list dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(126,148,128,.4); }
.status-list dd { margin-top: .25rem; color: #cfd8c6; font-size: .875rem; }

/* ─── htmx indicator ─────────────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ─── poem preview (success screen) ───────────────────────────────── */
.poem-preview {
  display: flex; flex-direction: column; gap: .75rem;
  border-top: 1px solid #1c2e1f;
  border-bottom: 1px solid #1c2e1f;
  padding: 1.25rem 0;
}
.poem-rendered {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.85;
  color: #dde8d4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── entry code (success screen) ─────────────────────────────────── */
.entry-display {
  border: 1px solid #1c2e1f;
  background: rgba(17,31,21,.5);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
}
.entry-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 2.25rem;
  letter-spacing: .35em;
  color: #d4a045;
  margin-top: .5rem;
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
}

/* ─── resend (code step) ──────────────────────────────────────────── */
.resend-row {
  margin-top: .5rem;
  text-align: center;
  font-size: .8rem;
  color: rgba(126,148,128,.5);
  font-variant-numeric: tabular-nums;
}
.resend-status #resend-timer { color: #a8bda0; }
.resend-form { margin: 0; }
.resend-btn {
  background: transparent;
  border: 1px solid rgba(61,107,74,.4);
  color: #7e9480;
  padding: .4rem 1rem;
  font-family: inherit;
  font-size: .8rem;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  -webkit-appearance: none; appearance: none;
}
.resend-btn:hover { border-color: #3d6b4a; color: #cfd8c6; }
.resend-btn:focus-visible { outline: 1px solid #3d6b4a; outline-offset: 1px; }