/*
 * Design system stylesheet: tokens, utilities, and components.
 * Load after tailwind.css so custom colors and components apply.
 * Tailwind v4 CLI may not emit @theme / @layer components into the build;
 * this file supplies them as plain CSS.
 */

:root {
  /* Page & surface */
  --color-background: #0f1117;
  --color-surface: #13161f;
  --color-inset: #0b0d14;       /* inputs, inset areas, nav bg */

  /* Borders */
  --color-border: #1e2130;
  --color-border-interactive: #2d3450;  /* ghost button borders */

  /* Brand */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-success: #10B981;
  --color-danger: #EF4444;

  /* Text */
  --color-text-primary: #E8EDF5;
  --color-text-secondary: #9BA3BE;
  --color-text-tertiary: #5C6480;
  --color-label-accent: #C5CCDE;  /* inline labels like "Why:" */
  --color-hint: #3d4462;          /* muted hints, vote-hint, dismiss button at rest */

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "DM Serif Display", Georgia, serif;
  --radius-card: 12px;
  --radius-input: 8px;
}

/* Underline tab chrome (used with underline-tabs Stimulus controller) */
.tab-underline-active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: -1px;
  font-weight: 500;
}
.tab-underline-inactive {
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-underline-inactive:hover {
  color: var(--color-text-primary);
}

/* Mobile hamburger: explicit media query bypasses Tailwind layer/ordering issues */
.mobile-hamburger {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .mobile-hamburger {
    display: none !important;
  }
}

/* Desktop nav: hidden on mobile, flex on desktop */
.desktop-nav {
  display: none !important;
}
@media (min-width: 768px) {
  .desktop-nav {
    display: flex !important;
  }
}

/* Utility-style classes (match class names used in views) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.bg-background { background-color: var(--color-background); }
.bg-surface { background-color: var(--color-surface); }
.border-border { border-color: var(--color-border); }
.rounded-card { border-radius: var(--radius-card); }
.rounded-input { border-radius: var(--radius-input); }
.text-text-primary { color: var(--color-text-primary); }
.text-text-secondary { color: var(--color-text-secondary); }
.text-text-tertiary { color: var(--color-text-tertiary); }
.text-hint { color: var(--color-hint); }
.text-primary { color: var(--color-primary); }
.text-danger { color: var(--color-danger); }
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }

/* Card title: serif headings inside card-accent / card-reskin */
.card-accent h2, .card-accent h1 { font-family: var(--font-serif); }
.card-title { font-family: var(--font-serif); font-size: 1.125rem; color: var(--color-text-primary); }

/* Left-border color utilities (used with Tailwind .border-l-4) */
.border-l-primary { border-left-color: var(--color-primary); }
.border-l-danger { border-left-color: var(--color-danger); }
.border-l-success { border-left-color: var(--color-success); }
.border-l-warning { border-left-color: #EAB308; }

/* Optional variants used in views */
.bg-background\/50 { background-color: color-mix(in srgb, var(--color-background) 50%, transparent); }
.hover\:bg-border\/50:hover { background-color: color-mix(in srgb, var(--color-border) 50%, transparent); }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.focus\:ring-offset-background:focus { --tw-ring-offset-color: var(--color-background); }
.bg-success\/20 { background-color: color-mix(in srgb, var(--color-success) 20%, transparent); }
.bg-success\/10 { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); }
.bg-danger\/20 { background-color: color-mix(in srgb, var(--color-danger) 20%, transparent); }
.bg-danger\/10 { background-color: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.border-success\/50 { border-color: color-mix(in srgb, var(--color-success) 50%, transparent); }
.border-danger\/50 { border-color: color-mix(in srgb, var(--color-danger) 50%, transparent); }
.bg-primary { background-color: var(--color-primary); }
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }

/* Component classes */
.input-reskin {
  min-height: 44px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
  background-color: var(--color-inset);
  padding: 0.5rem 1rem;
  font-size: 1rem; /* 16px min prevents iOS Safari auto-zoom on input focus */
  color: var(--color-text-primary);
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
select.input-reskin {
  appearance: auto; /* restore native dropdown arrow on mobile browsers */
}
.input-reskin::placeholder {
  color: var(--color-text-secondary);
}
.input-reskin:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
  border-color: var(--color-primary);
}
.input-reskin-error {
  border-color: var(--color-danger);
}
.input-reskin-error:focus {
  box-shadow: 0 0 0 2px var(--color-danger);
  border-color: var(--color-danger);
}

/* Read-only/disabled: muted so clearly distinct from editable fields */
.input-reskin:disabled,
.input-reskin[readonly] {
  background-color: var(--color-surface);
  color: var(--color-text-tertiary);
  border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
}
.input-reskin:disabled {
  cursor: not-allowed;
}
.input-reskin:disabled:focus {
  outline: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
}
.input-reskin[readonly] {
  cursor: default;
}
.input-reskin[readonly]:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-border);
  border-color: var(--color-border);
}

.btn-primary {
  min-height: 44px;
  border-radius: var(--radius-input);
  background-color: var(--color-primary);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px var(--color-primary);
}
.btn-primary:disabled,
.btn-primary.btn-busy {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-danger {
  min-height: 44px;
  border-radius: var(--radius-input);
  background-color: var(--color-danger);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-danger:hover:not(:disabled) {
  background-color: #dc2626;
}
.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px var(--color-danger);
}
.btn-danger:disabled,
.btn-danger.btn-busy {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-ghost {
  min-height: 44px;
  border-radius: var(--radius-input);
  background-color: transparent;
  border: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-ghost:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-border) 50%, transparent);
  color: var(--color-text-primary);
}
.btn-ghost:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px var(--color-border);
}
.btn-ghost:disabled,
.btn-ghost.btn-busy {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.card-reskin {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 1rem;
}
@media (min-width: 640px) {
  .card-reskin {
    padding: 1.5rem;
  }
}

/* Card with blue gradient accent line across the top */
.card-accent {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), #3b82f6 60%, transparent);
}

/* Nav link active state */
.nav-link-active {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border-radius: var(--radius-input);
}

/* Section eyebrow label (STEP 1, STEP 2, etc.) */
.section-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}

/* Config bar — collapsed state for sources page config section */
.config-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}
.config-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), #3b82f6 60%, transparent);
}
.config-bar:hover {
  border-color: var(--color-border-interactive);
}


/* Dashed secondary button (e.g. "Get new suggestions") */
.btn-dashed {
  background-color: var(--color-inset);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-input);
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-dashed:hover {
  border-color: var(--color-primary);
  color: #60a5fa;
}

/* Ghost button that turns red on hover — used for destructive actions */
.btn-ghost-danger:hover:not(:disabled) {
  border-color: var(--color-danger) !important;
  color: #f87171 !important;
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent) !important;
}

/* Card header/body padding — used by profile and similar structured cards */
.card-header-pad { padding: 24px 28px 0; }
.card-body-pad   { padding: 20px 28px 0; }
.card-body-pad-b { padding: 20px 28px 24px; } /* with bottom padding */

/* Field label with extra bottom spacing (e.g. before tab rows) */
.field-label-lg { margin-bottom: 12px; }

/* ── Profile form components ── */

/* Field label: 12px, label-accent color, flex for inline tooltip */
.field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-label-accent);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Plain-text read-only value (no input chrome) */
.field-value {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 10px 0;
}

/* Hint text below inputs */
.field-hint {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 5px;
  line-height: 1.5;
}

/* Card footer: top divider, right-aligned */
.card-footer {
  padding: 16px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--color-border);
  margin-top: 20px;
}

/* Save button green flash state */
.btn-saved {
  background-color: #16a34a !important;
}
.btn-saved:hover {
  background-color: #15803d !important;
}

/* Disclosure toggle row */
.disclosure-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-tertiary);
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  transition: color 0.15s;
  user-select: none;
}
.disclosure-row:hover { color: var(--color-text-secondary); }

.disclosure-arrow {
  font-size: 10px;
  display: inline-block;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.disclosure-arrow.disclosure-open { transform: rotate(90deg); }

/* Two-column field grid */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .two-col { grid-template-columns: 1fr; }
}

/* Custom checkbox */
.checkbox-styled {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 16px;
}
.checkbox-styled:last-child { margin-bottom: 0; }

.checkbox-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border-interactive);
  background: var(--color-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.checkbox-box.is-checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.checkbox-box.is-checked::after {
  content: '✓';
  font-size: 10px;
  color: #fff;
  font-weight: 700;
}
.checkbox-label {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.checkbox-label.is-checked { color: var(--color-text-primary); }

/* Section divider and subheading within cards */
.section-divider {
  height: 1px;
  background: var(--color-border);
  margin: 20px 0;
}
.section-subheading {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-label-accent);
  margin-bottom: 16px;
}

/* Tooltip icon (small circular i) */
.tooltip-icon-sm {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-border-interactive);
  color: var(--color-text-tertiary);
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  font-style: italic;
  font-family: serif;
  flex-shrink: 0;
}

/* Tooltip popover: hidden state uses visibility/opacity so toggling never causes layout reflow. */
.tooltip-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Toast stack: fixed bottom-right (desktop) / bottom-center (mobile). Outside overflow wrapper so X is never clipped. */
[data-controller="notification"] {
  position: fixed;
  bottom: 1.5rem;
  right: 2rem;
  z-index: 50;
  width: min(340px, calc(100vw - 4rem));
  max-width: 340px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
  max-height: 50vh;
  overflow-y: hidden;
}
[data-controller="notification"] [data-notification-target="container"] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

/* Individual toasts: content wrapper + justify-between so message never pushes close button. */
[data-controller="notification"] [role="alert"] {
  max-width: 100%;
  overflow: hidden;
}
[data-controller="notification"] [role="alert"] .toast-content {
  flex: 1;
  min-width: 0;
}
.toast .toast-message {
  word-break: break-word;
  user-select: text;
  cursor: text;
}
.toast .toast-close {
  flex-shrink: 0;
}

/* Toast content: limit to 3 lines with ellipsis to reduce screen coverage */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Toast expand/collapse functionality */
.toast-chevron-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-chevron {
  color: currentColor;
  opacity: 0.7;
  min-width: 16px;
  min-height: 16px;
}

.toast-chevron-btn:hover .toast-chevron {
  opacity: 1;
}

/* Confirmation Modal Animations */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.animate-modal-in {
  animation: modal-fade-in 0.15s ease-out;
}

.animate-modal-out {
  animation: modal-fade-out 0.15s ease-in;
}

/* ── Recommendations page ── */

/* Recommended article card */
.article-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 12px;
  position: relative;
  transition: border-color 0.15s;
}
.article-card:last-child { margin-bottom: 0; }
.article-card:hover { border-color: #2d3348; }

/* Not-recommended compact card */
.article-card-compact {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.article-card-compact:last-child { margin-bottom: 0; }
.article-card-compact:hover { border-color: #2d3348; }

/* Uppercase section label (INSIGHT, WHY RECOMMENDED) */
.article-row-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-label-accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}

/* Vote buttons */
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  border: 1px solid var(--color-border-interactive);
  color: #8A93B0;
}
.vote-btn:hover { border-color: #4a5470; color: var(--color-text-primary); }
.vote-btn.vote-good.is-active { background: #0a1f10; border-color: #16a34a; color: #4ade80; }
.vote-btn.vote-bad.is-active  { background: #1a0d0d; border-color: #ef4444; color: #f87171; }

/* Compact vote buttons (not-recommended section) */
.vote-btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
}
.vote-btn-compact:hover { border-color: var(--color-border-interactive); color: #8A93B0; }
.vote-btn-compact.vote-good.is-active { background: #0a1f10; border-color: #16a34a; color: #4ade80; }
.vote-btn-compact.vote-bad.is-active  { background: #1a0d0d; border-color: #ef4444; color: #f87171; }

/* "Feedback saved" hint after voting */
.vote-hint {
  font-size: 11px;
  color: var(--color-hint);
  margin-left: 4px;
  font-style: italic;
}

/* Article card hover states — CSS replaces inline onmouseover/onmouseout */
.article-title-link { color: var(--color-text-primary); text-decoration: none; }
.article-title-link:hover { color: #60a5fa; }
.article-compact-title-link { color: var(--color-text-secondary); text-decoration: none; }
.article-compact-title-link:hover { color: var(--color-text-primary); }
.article-dismiss {
  position: absolute; top: 12px; right: 12px;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; border: none; background: none;
  color: var(--color-hint); font-size: 16px; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.article-dismiss:hover { color: #8A93B0; background: var(--color-border); }

/* Expandable why-skipped block */
.compact-why-text {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 8px;
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--color-inset);
  border-radius: 6px;
  border-left: 2px solid var(--color-border);
}

/* Not-recommended section header */
.not-rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  user-select: none;
  border-top: 1px solid var(--color-border);
  border-left: none; border-right: none; border-bottom: none;
  background: none;
  margin-top: 16px;
  width: 100%;
}
.not-rec-header:hover .not-rec-title { color: var(--color-text-primary); }

.not-rec-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color 0.15s;
}
.not-rec-count {
  font-size: 11px;
  color: var(--color-text-tertiary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Plain text button (underlined, no chrome) */
.btn-text {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-text:hover { color: #f87171; }
.btn-text:disabled { opacity: 0.4; cursor: not-allowed; }

/* Neutral variant — for non-destructive text actions */
.btn-text-muted { background: none; border: none; font-size: 12px; color: var(--color-text-tertiary); cursor: pointer; padding: 0; transition: color 0.15s; text-decoration: underline; text-underline-offset: 2px; }
.btn-text-muted:hover { color: var(--color-text-secondary); }
.btn-text-muted:disabled { opacity: 0.4; cursor: not-allowed; }

/* Progress bar — done state (green) */
.progress-fill-done {
  background: linear-gradient(90deg, #15803d, #4ade80) !important;
  transition: background 0.5s ease;
}
.progress-msg-done { color: #4ade80 !important; font-weight: 600; }


/* Hide scrollbar — for carousels and overflow containers */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }