/* resend.squatch.cc — strict-CSP friendly base styles (Layer 3).
 *
 * Lives at /static/app.css and is loaded via <link rel="stylesheet"> in every
 * page so the global CSP can be `style-src 'self'` (no 'unsafe-inline'). All
 * one-off positioning has a utility class below — no inline style="..." in HTML.
 */

:root {
  color-scheme: light dark;
  --fg: #222;
  --bg: #fff;
  --muted: #888;
  --border: #8884;
  --accent: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root { --fg: #eee; --bg: #111; --border: #8884; }
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  max-width: 56rem;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
}

header {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
header h1 { font-size: 1.1rem; margin: 0; }
header nav { display: flex; gap: 1rem; margin-left: auto; }
header nav a { color: var(--accent); text-decoration: none; }

.card { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.muted { color: var(--muted); font-size: 0.9rem; }

label { display: block; font-size: 0.85rem; margin: 0.75rem 0 0.25rem; color: var(--muted); }
input, textarea, select {
  width: 100%; padding: 0.5rem; font-family: inherit; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg);
}
textarea { min-height: 12rem; font-family: ui-monospace, monospace; font-size: 0.9rem; }

button {
  padding: 0.55rem 0.9rem; border: 1px solid var(--accent); background: var(--accent);
  color: white; border-radius: 6px; cursor: pointer; font-size: 0.95rem;
}
button.secondary { background: transparent; color: var(--accent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }

iframe.preview {
  width: 100%; min-height: 24rem;
  border: 1px solid var(--border); border-radius: 6px; background: white;
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); }

.pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; border: 1px solid var(--border); }
.pill.sent { background: #16a34a22; border-color: #16a34a; }
.pill.draft { background: #ca8a0422; border-color: #ca8a04; }

#flash { padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; display: none; }
#flash.show { display: block; }
#flash.err { background: #ef444422; border: 1px solid #ef4444; }
#flash.ok  { background: #16a34a22; border: 1px solid #16a34a; }

code.small { font-size: 0.8rem; color: var(--muted); }

/* ── utility classes (replace inline style="…" attrs to keep CSP strict) ── */
.hr-soft     { margin: 1.5rem 0; opacity: 0.3; }
.h3-small    { font-size: 1rem; }
.mt-sm       { margin-top: 0.5rem; }
.mt-1        { margin-top: 1rem; }
.fs-small    { font-size: 0.85rem; }