/* ═══════════════════════════════════════════════════════
   Goon API — Newsprint Design System
   "All the News That's Fit to Print"
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400&family=Lora:ital,wght@0,400;0,600;1,400&display=block');

/* ── Design Tokens ──────────────────────────────────── */
:root {
  --bg: #F9F9F7;
  --fg: #111111;
  --muted: #E5E5E0;
  --accent: #CC0000;
  --n100: #F5F5F0;
  --n200: #E5E5E5;
  --n400: #A3A3A3;
  --n500: #737373;
  --n600: #525252;
  --n700: #404040;
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;
  --font-ui: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* ── Reset & Base ───────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; border-radius:0 !important; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23111111' fill-opacity='0.04' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
a { color: var(--fg); text-decoration: none; }
img { max-width:100%; display:block; }
button, input, select, textarea { font-family: inherit; border-radius:0 !important; }
::selection { background: var(--fg); color: var(--bg); }

/* ── Typography ─────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-ui      { font-family: var(--font-ui); }
.font-mono    { font-family: var(--font-mono); }

.text-hero { font-size: clamp(2.5rem, 8vw, 7rem); line-height:0.9; letter-spacing:-0.03em; font-weight:900; }
.text-h1   { font-size: clamp(2rem, 5vw, 3.5rem); line-height:1; font-weight:900; }
.text-h2   { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height:1.1; font-weight:700; }
.text-h3   { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height:1.2; font-weight:700; }
.text-body { font-size: 0.9375rem; line-height:1.7; }
.text-sm   { font-size: 0.8125rem; }
.text-xs   { font-size: 0.6875rem; }

.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--n500);
}

/* ── Layout ─────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 1rem; }
.grid-12 { display:grid; grid-template-columns:repeat(12,1fr); }

/* ── Newsprint Texture ──────────────────────────────── */
.newsprint-texture { position:relative; }
.newsprint-texture::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.4;
  background-image:
    linear-gradient(0deg, transparent 98%, rgba(0,0,0,0.02) 100%),
    linear-gradient(90deg, transparent 98%, rgba(0,0,0,0.02) 100%);
  background-size: 3px 3px;
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family: var(--font-ui); font-size:0.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em;
  padding: 0.75rem 1.75rem; min-height:44px;
  border: 1px solid transparent;
  cursor:pointer; transition: all 0.2s ease-out;
  text-decoration: none;
}
.btn-primary {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.btn-primary:hover { background: var(--bg); color: var(--fg); }
.btn-outline {
  background: transparent; color: var(--fg); border-color: var(--fg);
}
.btn-outline:hover { background: var(--fg); color: var(--bg); }
.btn-ghost { background:transparent; color:var(--fg); border:1px solid transparent; }
.btn-ghost:hover { background: var(--muted); }
.btn-danger { background: var(--accent); color:#fff; border-color: var(--accent); }
.btn-danger:hover { background:#a00; }
.btn-sm { padding:0.5rem 1rem; font-size:0.75rem; min-height:36px; }
.btn-full { width:100%; }

/* ── Cards ──────────────────────────────────────────── */
.card {
  border: 1px solid var(--fg);
  background: var(--bg);
  padding: 1.5rem;
}
.card-hover { transition: all 0.2s ease-out; }
.card-hover:hover {
  box-shadow: 4px 4px 0px 0px var(--fg);
  transform: translate(-2px, -2px);
}

/* ── Inputs ─────────────────────────────────────────── */
.input {
  width:100%; padding:0.625rem 0.75rem;
  background: transparent;
  border: none; border-bottom: 2px solid var(--fg);
  font-family: var(--font-mono); font-size:0.875rem;
  color: var(--fg);
  transition: background 0.2s;
}
.input:focus { background: #F0F0EC; outline:none; }
.input::placeholder { color: var(--n400); }
.input-bordered {
  border: 1px solid var(--fg); padding:0.75rem;
  background: var(--bg); font-family: var(--font-mono); font-size:0.875rem;
}
.input-bordered:focus { background: #F0F0EC; outline:none; }

/* ── Dividers ───────────────────────────────────────── */
.divider { border:none; border-top:1px solid var(--fg); margin:0; }
.divider-thick { border-top-width:4px; }
.divider-muted { border-top-color: var(--muted); }
.ornament {
  text-align:center; padding:2rem 0;
  font-family: var(--font-display);
  font-size:1.5rem; color: var(--n400);
  letter-spacing:1em;
}

/* ── Badge ──────────────────────────────────────────── */
.badge {
  display:inline-block; padding:0.25rem 0.625rem;
  font-family: var(--font-mono); font-size:0.625rem;
  text-transform:uppercase; letter-spacing:0.15em; font-weight:600;
  border: 1px solid var(--fg);
}
.badge-accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.badge-dark { background:var(--fg); color:var(--bg); }

/* ── Header ─────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--fg);
  background: var(--bg);
  position:sticky; top:0; z-index:40;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.75rem 1rem; max-width:1280px; margin:0 auto;
}
.header-logo {
  font-family: var(--font-display); font-size:1.375rem; font-weight:900;
  color: var(--fg); text-decoration:none; display:flex; align-items:center; gap:0.375rem;
}
.header-logo span { color: var(--accent); }
.header-nav { display:flex; align-items:center; gap:0.25rem; }
.header-nav a, .header-nav button {
  font-family: var(--font-ui); font-size:0.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.1em;
  padding:0.5rem 0.875rem; color:var(--fg); text-decoration:none;
  border:none; background:none; cursor:pointer;
  transition: color 0.2s;
}
.header-nav a:hover, .header-nav button:hover { color: var(--accent); }
.header-edition {
  font-family: var(--font-mono); font-size:0.625rem;
  color: var(--n500); text-transform:uppercase; letter-spacing:0.1em;
  text-align:center; padding:0.375rem 1rem;
  border-bottom: 1px solid var(--muted);
}

/* ── Footer ─────────────────────────────────────────── */
.site-footer {
  border-top: 4px solid var(--fg);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}
.footer-grid {
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:2rem; max-width:1280px; margin:0 auto; padding:0 1rem;
}
.footer-brand { font-family:var(--font-display); font-size:1.25rem; font-weight:900; margin-bottom:0.75rem; }
.footer-desc { font-size:0.8125rem; color:var(--n600); line-height:1.6; }
.footer-heading {
  font-family:var(--font-ui); font-size:0.6875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.15em; margin-bottom:0.75rem;
}
.footer-link {
  display:block; font-family:var(--font-ui); font-size:0.8125rem;
  color:var(--n600); padding:0.25rem 0; transition:color 0.2s;
}
.footer-link:hover { color:var(--accent); }
.footer-bottom {
  margin-top:2rem; padding-top:1rem; border-top:1px solid var(--muted);
  font-family:var(--font-mono); font-size:0.625rem; color:var(--n500);
  text-transform:uppercase; letter-spacing:0.1em;
  max-width:1280px; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem;
}

/* ── Inverted Section ───────────────────────────────── */
.section-inverted {
  background: var(--fg); color: var(--bg);
}
.section-inverted .label { color: var(--n400); }
.section-inverted .card { background: #1a1a1a; border-color: #333; }
.section-inverted .badge { border-color: #555; color: var(--bg); }
.section-inverted a { color: var(--bg); }

/* ── Ticker / Marquee ───────────────────────────────── */
.ticker {
  background: var(--fg); color: var(--bg);
  padding: 0.5rem 0; overflow:hidden; white-space:nowrap;
  font-family: var(--font-mono); font-size:0.75rem;
  text-transform:uppercase; letter-spacing:0.1em;
  border-bottom: 1px solid #333;
}
.ticker-inner {
  display:inline-block; animation: ticker-scroll 30s linear infinite;
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-dot { display:inline-block; width:6px; height:6px; background:var(--accent); margin:0 1rem; vertical-align:middle; }

/* ── Sidebar Dashboard ──────────────────────────────── */
.dash-layout { display:flex; min-height:100vh; }
.dash-sidebar {
  width:240px; border-right:1px solid var(--fg);
  padding:1.25rem 0; flex-shrink:0;
  display:flex; flex-direction:column;
  background: var(--bg);
}
.dash-sidebar-link {
  display:flex; align-items:center; gap:0.625rem;
  padding:0.625rem 1.25rem;
  font-family:var(--font-ui); font-size:0.8125rem; font-weight:500;
  color:var(--n600); text-decoration:none;
  border-left:3px solid transparent;
  transition: all 0.15s;
}
.dash-sidebar-link:hover { color:var(--fg); background:var(--n100); }
.dash-sidebar-link.active {
  color:var(--fg); font-weight:700;
  border-left-color:var(--accent);
  background:var(--n100);
}
.dash-main { flex:1; min-width:0; }
.dash-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.75rem 1.5rem;
  border-bottom:1px solid var(--fg);
}

/* ── Stat Cards ─────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.stat-card {
  padding:1.25rem 1.5rem;
  border-right:1px solid var(--fg);
  border-bottom:1px solid var(--fg);
}
.stat-card:last-child { border-right:none; }
.stat-label { font-family:var(--font-mono); font-size:0.625rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--n500); margin-bottom:0.25rem; }
.stat-value { font-family:var(--font-display); font-size:1.75rem; font-weight:900; }
.stat-sub { font-family:var(--font-ui); font-size:0.6875rem; color:var(--n500); margin-top:0.125rem; }

/* ── Table ──────────────────────────────────────────── */
.np-table { width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:0.8125rem; }
.np-table th {
  text-align:left; padding:0.625rem 0.75rem;
  font-family:var(--font-mono); font-size:0.625rem;
  text-transform:uppercase; letter-spacing:0.15em;
  border-bottom:2px solid var(--fg); color:var(--n500); font-weight:600;
}
.np-table td { padding:0.625rem 0.75rem; border-bottom:1px solid var(--muted); }
.np-table tr:hover td { background:var(--n100); }

/* ── Code Block ─────────────────────────────────────── */
.code-block {
  background: var(--fg); color: #e0e0e0;
  padding:1.25rem; overflow-x:auto;
  font-family:var(--font-mono); font-size:0.8125rem; line-height:1.6;
  border:1px solid var(--fg);
}
code { font-family:var(--font-mono); font-size:0.85em; background:var(--muted); padding:0.125rem 0.375rem; }
.section-inverted code { background:#333; }

/* ── Drop Cap ───────────────────────────────────────── */
.drop-cap::first-letter {
  float:left; font-family:var(--font-display);
  font-size:4rem; font-weight:900; line-height:0.8;
  margin-right:0.5rem; margin-top:0.25rem; color:var(--accent);
}

/* ── Grayscale Images ───────────────────────────────── */
.img-editorial { filter:grayscale(100%); transition:filter 0.3s; }
.img-editorial:hover { filter:sepia(30%); }

/* ── Chat Specific ──────────────────────────────────── */
.chat-layout { display:flex; flex-direction:column; height:100vh; }
.chat-messages { flex:1; overflow-y:auto; padding:1.5rem 0; }
.chat-msg { max-width:780px; margin:0 auto; padding:0.75rem 1.5rem; width:100%; }
.chat-msg-user { display:flex; justify-content:flex-end; }
.chat-msg-user .chat-bubble {
  background:var(--fg); color:var(--bg); padding:0.75rem 1.125rem;
  max-width:70%; font-size:0.9375rem; line-height:1.6;
  border:1px solid var(--fg);
}
.chat-msg-user .chat-bubble img { max-width:240px; margin-top:0.5rem; filter:grayscale(100%); }
.chat-msg-ai { display:flex; gap:0.75rem; align-items:flex-start; }
.chat-ai-icon {
  width:28px; height:28px; border:1px solid var(--fg);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:0.75rem; font-weight:900;
  flex-shrink:0; margin-top:0.125rem;
}
.chat-msg-ai .chat-bubble { flex:1; font-size:0.9375rem; line-height:1.8; }
.chat-msg-ai .chat-bubble p { margin-bottom:0.75rem; }
.chat-msg-ai .chat-bubble p:last-child { margin-bottom:0; }
.chat-msg-ai .chat-bubble pre {
  background:var(--fg); color:#e0e0e0; padding:1rem; margin:0.75rem 0;
  overflow-x:auto; font-size:0.8125rem;
}
.chat-msg-ai .chat-bubble pre code { background:none; padding:0; color:#e0e0e0; }
.chat-msg-ai .chat-bubble strong { font-weight:700; }
.chat-msg-ai .chat-bubble ul, .chat-msg-ai .chat-bubble ol { padding-left:1.5rem; margin:0.5rem 0; }
.chat-msg-ai .chat-bubble h1,.chat-msg-ai .chat-bubble h2,.chat-msg-ai .chat-bubble h3 {
  font-family:var(--font-display); margin:1rem 0 0.5rem; font-weight:700;
}
.chat-msg-ai .chat-bubble blockquote {
  border-left:3px solid var(--accent); padding-left:1rem; color:var(--n600); margin:0.5rem 0;
}
.typing-cursor {
  display:inline-block; width:2px; height:1em; background:var(--fg);
  margin-left:2px; vertical-align:text-bottom;
  animation: blink-cursor 0.8s infinite;
}
@keyframes blink-cursor { 0%,100%{opacity:1} 50%{opacity:0} }

.chat-input-area { padding:0.75rem 1.5rem 1.25rem; border-top:1px solid var(--fg); }
.chat-input-wrap { max-width:780px; margin:0 auto; }
.chat-input-box {
  display:flex; align-items:flex-end;
  border:1px solid var(--fg); padding:0.5rem;
  background:var(--bg); transition:border-color 0.2s;
}
.chat-input-box:focus-within { border-width:2px; padding: calc(0.5rem - 1px); }
.chat-input-box textarea {
  flex:1; background:none; border:none; color:var(--fg);
  font-family:var(--font-body); font-size:0.9375rem;
  resize:none; outline:none; max-height:150px; min-height:24px;
  line-height:24px; padding:0.375rem 0.5rem;
}
.chat-input-box textarea::placeholder { color:var(--n400); }
.chat-send-btn {
  width:40px; height:40px; border:1px solid var(--fg);
  background:var(--fg); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:all 0.15s;
}
.chat-send-btn:hover { background:var(--bg); color:var(--fg); }
.chat-send-btn:disabled { opacity:0.3; cursor:default; }
.chat-send-btn.stop { background:var(--accent); border-color:var(--accent); color:#fff; }
.chat-upload-btn {
  width:36px; height:36px; background:none; border:none;
  color:var(--n500); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: color 0.15s;
}
.chat-upload-btn:hover { color:var(--fg); }

.img-preview { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.5rem; }
.img-preview-item { position:relative; }
.img-preview-item img { width:72px; height:72px; object-fit:cover; border:1px solid var(--fg); filter:grayscale(100%); }
.img-preview-item .remove-img {
  position:absolute; top:-6px; right:-6px; width:18px; height:18px;
  background:var(--accent); color:#fff; border:none; font-size:0.625rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:767px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .dash-sidebar { display:none; }
  .dash-mobile-nav { display:flex !important; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .stat-card { border-right:none; }
  .stat-card:nth-child(odd) { border-right:1px solid var(--fg); }
  .hide-mobile { display:none !important; }
  .chat-msg { padding:0.5rem 1rem; }
  .chat-msg-user .chat-bubble { max-width:85%; }
}
@media (min-width:768px) {
  .dash-mobile-nav { display:none !important; }
}

/* ── Utility ────────────────────────────────────────── */
.text-accent { color: var(--accent); }
.text-muted { color: var(--n500); }
.bg-inverted { background:var(--fg); color:var(--bg); }
.border-b { border-bottom:1px solid var(--fg); }
.border-t { border-top:1px solid var(--fg); }
.border-r { border-right:1px solid var(--fg); }
.border-full { border:1px solid var(--fg); }
.uppercase { text-transform:uppercase; }
.tracking-wide { letter-spacing:0.1em; }
.tracking-wider { letter-spacing:0.15em; }
.justify { text-align:justify; }
.hidden { display:none !important; }