/* "Carbon" design: typewriter/terminal look, IBM Plex Mono throughout, green accent. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/plex-mono-600.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #edefec; --surface: #f7f8f6; --text: #171a17; --muted: #5c645c; --faint: #8a928a;
  --rule: #d3d8d2; --rule-dashed: #b9c0b8; --accent: #2f7d4f;
  --btn-bg: #171a17; --btn-text: #edefec;
  --error-text: #8f1e17; --error-bg: #f9ecea; --error-border: #b3261e;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f110f; --surface: #171a17; --text: #d6dcd4; --muted: #8a948a; --faint: #6b756b;
    --rule: #283028; --rule-dashed: #344034; --accent: #5fc98a;
    --btn-bg: #d6dcd4; --btn-text: #0f110f;
    --error-text: #ff8a80; --error-bg: #2a1513; --error-border: #ff8a80;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.6 var(--mono); background: var(--bg); color: var(--text); }
h1, h2, p { margin: 0; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.visually-hidden, .check input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Brand mark: green block + lowercase name */
.brand { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.brand::before { content: ""; width: 8px; height: 14px; background: var(--accent); }

/* Text input row with prefix and optional counter */
.field { background: var(--surface); border: 1px solid var(--text); padding: 12px 14px; display: flex; gap: 10px; align-items: baseline; }
.field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.field .prefix { color: var(--accent); flex: none; white-space: pre; }
.field input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.field input::placeholder { color: var(--faint); opacity: 1; }
.field .counter { color: var(--faint); flex: none; }

/* Checkboxes: native input kept for focus/accessibility, drawn as [x] / [ ] */
.check { position: relative; cursor: pointer; font-weight: 400; }
.check span::before { content: "[ ] "; white-space: pre; color: var(--faint); }
.check input:checked + span::before { content: "[x] "; color: var(--accent); }
.check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Buttons */
button { font: 500 14px/1.6 var(--mono); cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:not(.link) {
  background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-bg); border-radius: 0;
  padding: 6px 14px; text-transform: lowercase; white-space: pre;
}
button:not(.link)::before { content: "[ "; }
button:not(.link)::after { content: " ↵ ]"; }
button:not(.link):hover { opacity: .85; }
button:not(.link):disabled { background: transparent; color: var(--faint); border-color: var(--rule); cursor: progress; opacity: 1; }
button:not(.link):disabled::after { content: " ]"; }
button.link, a { color: var(--muted); background: none; border: 0; padding: 0; font-weight: 400; text-decoration: none; text-transform: lowercase; }
button.link:hover, a:hover { text-decoration: underline; }
.back::before { content: "< "; }
#signout::before { content: "["; }
#signout::after { content: "]"; }

/* Errors: take no space until they have a message, then a boxed "! message" */
.error:not(:empty) { border: 1px solid var(--error-border); background: var(--error-bg); color: var(--error-text); padding: 12px 14px; }
.error:not(:empty)::before { content: "! "; font-weight: 600; }

/* Auth screens (sign in, check email, confirm) */
.auth { min-height: 100vh; display: flex; flex-direction: column; padding: 24px 32px; }
.auth-col { flex: 1; width: 420px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.auth h1 { font-size: 28px; font-weight: 600; line-height: 1.3; margin: 4px 0 16px; }
.auth h1:first-child { margin-top: 0; }
.auth h1.spaced { margin-bottom: 28px; }
.auth label { display: block; color: var(--muted); margin-bottom: 6px; }
.auth button:not(.link) { padding: 10px 16px; margin-top: 16px; }
.auth .error { margin-top: 16px; }
.auth .lead { margin-bottom: 24px; text-wrap: pretty; }
.auth p.ok { color: var(--accent); }
.auth .lead + div > button:not(.link) { margin-top: 0; }
.auth .back-start { margin-top: 20px; align-self: flex-start; }
.auth .error:empty { margin-top: 0; }

/* Main screen */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 32px; border-bottom: 1px solid var(--rule); }
.topbar .user { color: var(--muted); }
#signout { margin-left: 2ch; }
.col { max-width: 680px; margin: 36px auto 48px; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
#poem-form { display: flex; flex-direction: column; gap: 16px; }
.controls { display: flex; gap: 28px; align-items: center; }
#generate { margin-left: auto; }
#poem-form .error:empty { margin-top: -16px; } /* cancel the form gap so an empty error adds no space */

#result { border-top: 1px dashed var(--rule-dashed); padding-top: 22px; }
#result-title { font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0 0 14px; }
#result-title::before { content: "# "; }
#result-title:empty { display: none; }
.poem { font-size: 16px; line-height: 1.75; white-space: pre-wrap; }
.cursor { display: inline-block; width: 9px; height: 18px; background: var(--accent); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
.cursor.typing { animation: none; } /* solid while text is arriving, blinking while waiting */
@keyframes blink { 50% { opacity: 0; } }

/* History log */
.history-head { margin-top: 12px; font-size: 14px; font-weight: 400; color: var(--muted); }
.history-head .faint { margin-left: 2ch; }
#history { border-top: 1px solid var(--text); }
#history > .faint { padding: 9px 0; }
.history-item { border-bottom: 1px solid var(--rule); }
.history-item:last-child { border-bottom: 0; }
.history-item summary { display: block; padding: 9px 0; cursor: pointer; list-style: none; }
.history-item summary::-webkit-details-marker { display: none; }
.history-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.history-item .name { font-weight: 500; }
.history-item .name::before { content: "▸ "; }
.history-item[open] .name::before { content: "▾ "; }
.history-item .poem { font-size: 14px; line-height: 1.7; padding: 4px 0 8px 2ch; } /* 2ch lines up with the title after "▸ " */
.poem-actions { padding: 0 0 14px 2ch; }
.delete::before { content: "["; }
.delete::after { content: "]"; }
.delete.armed { color: var(--error-text); }

@media (max-width: 560px) {
  body { font-size: 13px; }
  button { font-size: 13px; }
  .auth { padding: 20px; }
  .topbar { padding: 20px 20px 12px; }
  #who { display: none; }
  #signout { margin-left: 0; }
  .col { margin: 0 auto 32px; padding: 18px 20px; gap: 12px; }
  #poem-form { gap: 12px; }
  #poem-form .error:empty { margin-top: -12px; }
  .field { padding: 12px; gap: 8px; }
  .field .long, .field .counter { display: none; }
  .controls { flex-direction: column; align-items: stretch; gap: 4px; }
  #generate { margin: 8px 0 0; padding: 12px; text-align: center; }
  #result { padding-top: 16px; }
  #result-title { font-size: 17px; margin: 0 0 10px; }
  .poem { font-size: 14px; }
  .history-item summary { padding: 8px 0; }
  .history-item .poem { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}