/* Terminal-style blog - dark background, bright orange, CLI accents */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg: #0d1117;
  --fg: #ff6b35;
  --fg-dim: #cc5529;
  --green: #22c55e;
  --red: #ef4444;
  --border: #30363d;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 1.5rem 2rem;
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--green);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #4ade80;
}

/* Terminal prompt aesthetic */
.prompt {
  color: var(--fg-dim);
  margin-bottom: 0.5rem;
}

.prompt::before {
  content: '> ';
  color: var(--green);
}

/* Error states */
.error {
  color: var(--red);
}

/* Layout */
header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

header h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

nav a {
  margin-right: 1.5rem;
}

/* Feed */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-item {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.post-item h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
}

.post-meta {
  font-size: 0.8rem;
  color: var(--fg-dim);
  margin-bottom: 0.5rem;
}

.post-excerpt {
  font-size: 0.9rem;
  color: var(--fg);
}

.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* Individual post */
article {
  max-width: 65ch;
}

article h1 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

article .meta {
  font-size: 0.8rem;
  color: var(--fg-dim);
  margin-bottom: 1.5rem;
}

article .content {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Write page form */
form {
  max-width: 600px;
}

label {
  display: block;
  margin: 1rem 0 0.25rem 0;
  font-size: 0.9rem;
}

input, textarea {
  font-family: inherit;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  width: 100%;
  font-size: 0.9rem;
}

input:focus, textarea:focus {
  outline: 1px solid var(--fg);
}

textarea {
  min-height: 200px;
  resize: vertical;
}

button {
  font-family: inherit;
  background: var(--fg);
  color: var(--bg);
  border: none;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  cursor: pointer;
  font-size: 0.9rem;
}

button:hover {
  background: var(--fg-dim);
}

.output-box {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #161b22;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.copied {
  color: var(--green);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}