/* Tokens and the base layer (reset, .page frame, .btn) come from /lib — see
   lib/tokens.css and lib/base.css. Only what's specific to feeds lives here. */

.input-panel { margin: var(--space-5) 0 var(--space-6); }
.input-panel label, .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-dim);
  font-size: var(--text-sm);
}
textarea {
  display: block;
  width: 100%;
  min-height: 14rem;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: var(--text-sm)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
}
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
/* Only ever disabled while a fetch is in flight. */
.btn:disabled { cursor: wait; }
.hint { color: var(--text-dim); font-size: var(--text-sm); }
.error {
  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--danger);
  background: var(--surface-2);
  color: var(--danger);
}

.preview { border-top: 1px solid var(--border); padding-top: var(--space-6); }
.feed-head { padding-bottom: var(--space-5); }
.eyebrow { margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: 0.08em; }
.feed-head h2 { margin: 0; font-size: var(--text-xl); letter-spacing: -0.01em; }
.feed-head h2 a, .entry h3 a { color: inherit; text-decoration: none; }
.feed-head h2 a:hover, .entry h3 a:hover { color: var(--accent); }
.feed-subtitle { max-width: 42rem; margin: var(--space-2) 0 0; color: var(--text-dim); }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); color: var(--text-dim); font-size: var(--text-sm); }
.meta span + span::before { content: "·"; margin-right: var(--space-2); }
.entries { border-top: 1px solid var(--border); }
.entry { padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
.entry h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.entry-body { max-width: 42rem; overflow-wrap: anywhere; }
.entry-body > :first-child { margin-top: 0; }
.entry-body > :last-child { margin-bottom: 0; }
.entry-body a { color: var(--accent); }
.entry-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.empty { margin: 0; padding: var(--space-5) 0; color: var(--text-dim); }

@media (max-width: 520px) {
  .hint { width: 100%; }
}