/* THE QUIET FEED - Main Stylesheet */
/* Design: "Blade Runner / Alien timeless system feel, old school telex news service,
   but a clean optimistic future (white minimalism)" */

/* ============================================
   CSS CUSTOM PROPERTIES (Brand Tokens)
   ============================================ */
:root {
  /* Typography */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Monaco", "Consolas", "Courier New", monospace;

  /* Brand Colors */
  --color-text: #1f2937;
  --color-text-secondary: #475569;
  --color-accent: #b45309;      /* Amber - primary accent */
  --color-accent-hover: #92400e;
  --color-background: #ffffff;
  --color-surface: #fef3c7;     /* Light amber surface */
  --color-surface-alt: #f8fafc;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;

  /* Semantic Colors */
  --color-success: #059669;
  --color-error: #dc2626;
  --color-warning: #d97706;
  --color-info: #0284c7;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Sizing */
  --max-width: 720px;
  --max-width-wide: 960px;

  /* Score colors */
  --score-high: #059669;    /* 80-100 */
  --score-medium: #d97706;  /* 50-79 */
  --score-low: #dc2626;     /* 0-49 */
}

/* ============================================
   BASE RESET & TYPOGRAPHY
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

h1 {
  font-size: 2rem;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

h2 {
  font-size: 1.25rem;
  color: var(--color-accent);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Monospace labels (SCORE, MUTE, etc.) */
.label, .command {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.subtitle {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

/* System prefix styling */
.system-prefix {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================
   HEADER
   ============================================ */
header {
  margin-bottom: var(--space-xl);
  text-align: center;
  position: relative;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

/* Navigation Links */
.nav-links {
  display: flex;
  gap: var(--space-md);
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.nav-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.nav-link.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Header Brand (center) */
.header-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.brand-title {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* Status Section */
.status-section {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.system-status {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
#mainContent {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-container {
  background: var(--color-background);
  padding: var(--space-xl);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

/* ============================================
   FEED STYLES
   ============================================ */
.feed-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.feed-filters {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.feed-filter {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.feed-filter:hover,
.feed-filter.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.feed-filter.active {
  background-color: var(--color-surface);
}

/* Feed Item */
.feed-item {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.feed-item:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.1);
}

.feed-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.feed-item-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

.score-value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.score-value.score-high { color: var(--score-high); }
.score-value.score-medium { color: var(--score-medium); }
.score-value.score-low { color: var(--score-low); }

/* Info and action indicators for house content (not scored articles) */
.feed-item-score.score-info .score-value,
.feed-item-score.score-action .score-value {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
}

.feed-item-score.score-info {
  background: var(--color-surface);
  border-radius: 4px;
  padding: 0.25rem;
}

.feed-item-score.score-action .score-value {
  color: var(--color-accent);
}

.score-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feed-item-content {
  flex: 1;
}

.feed-item-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.feed-item-title a {
  color: inherit;
}

.feed-item-title a:hover {
  color: var(--color-accent);
}

.feed-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.feed-item-source {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
}

.feed-item-time {
  color: var(--color-text-secondary);
}

.feed-item-excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  line-height: 1.5;
}

.feed-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.feed-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 2px var(--space-sm);
  background: var(--color-surface);
  border-radius: 3px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.feed-tag.tag-dedup {
  background: #dbeafe;
  color: #1e40af;
}

.feed-tag.tag-wire {
  background: #fce7f3;
  color: #9d174d;
}

/* Wire mode title styling */
.feed-item-title.wire-mode-title a {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

/* Feed Actions */
.feed-item-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
}

.feed-action {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}

.feed-action:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Load More */
.feed-load-more {
  text-align: center;
  padding: var(--space-xl);
}

.btn-load-more {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-xl);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s;
}

.btn-load-more:hover {
  background: var(--color-accent);
  color: var(--color-background);
}

/* Feed Source Selector */
.feed-sources {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.feed-source-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.feed-source-btn:hover,
.feed-source-btn.active {
  border-color: var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  font-family: var(--font-mono);
  background-color: var(--color-accent);
  color: var(--color-background);
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn:hover {
  background-color: var(--color-accent-hover);
}

.btn:disabled {
  background-color: var(--color-border);
  cursor: not-allowed;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.btn-secondary:hover {
  background-color: var(--color-surface);
}

.btn-small {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
  margin-bottom: var(--space-lg);
}

label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.help-text {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

/* ============================================
   STATUS MESSAGES
   ============================================ */
.status-message {
  padding: var(--space-md);
  border-radius: 4px;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-message-content {
  flex: 1;
}

.status-success {
  background-color: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.status-error {
  background-color: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.status-info {
  background-color: #dbeafe;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.status-warning {
  background-color: var(--color-surface);
  border: 1px solid #fde68a;
  color: #92400e;
}

.status-close-button {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
  color: inherit;
  opacity: 0.7;
}

.status-close-button:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-left {
  display: flex;
  gap: var(--space-md);
}

.footer-left a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.footer-left a:hover {
  color: var(--color-accent);
}

.footer-center {
  text-align: center;
}

.footer-right {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* External link icon */
a[target="_blank"]::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 2px;
  opacity: 0.6;
}

/* ============================================
   LOADING & SPINNER
   ============================================ */
.spinner {
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 0.8s linear infinite;
  margin: var(--space-xl) auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   BUNDLES / SERVICE ITEMS
   ============================================ */
.bundles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.service-item {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  transition: border-color 0.2s;
}

.service-item:hover {
  border-color: var(--color-accent);
}

.service-item h3 {
  font-family: var(--font-mono);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.service-description {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* ============================================
   TABLES
   ============================================ */
.data-table,
.results-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
}

.data-table th,
.data-table td,
.results-table th,
.results-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border: 1px solid var(--color-border);
}

.data-table th,
.results-table th {
  background-color: var(--color-surface-alt);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.data-table tr:hover,
.results-table tr:hover {
  background-color: var(--color-surface-alt);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
  body {
    padding: var(--space-md);
  }

  h1 {
    font-size: 1.5rem;
  }

  .header-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .status-section {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .feed-item {
    padding: var(--space-md);
  }

  .feed-item-header {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .feed-item-score {
    flex-direction: row;
    gap: var(--space-sm);
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-left {
    justify-content: center;
  }
}

/* ============================================
   QUIET FEED SPECIFIC - SHIELD
   ============================================ */

/* No autoplay - videos require explicit click */
video {
  cursor: pointer;
}

video[autoplay] {
  autoplay: false !important;
}

/* SHIELD indicator */
.shield-active {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px var(--space-xs);
  background: #dbeafe;
  color: #1e40af;
  border-radius: 2px;
  text-transform: uppercase;
}

/* ============================================
   DEVELOPER / SANDBOX MODES
   ============================================ */
.sandbox-indicator {
  background-color: var(--color-surface);
  border: 2px solid var(--color-warning);
  color: var(--color-accent-hover);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  margin-bottom: var(--space-md);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  display: none;
}

.sandbox-indicator.visible {
  display: block;
}

.developer-controls {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-align: center;
}

.developer-section {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid #fde68a;
  border-radius: 6px;
}