/*
  editorial-shell.css
  Overrides styles.css with the warm-paper editorial design language from sv-home.css.
  Loads AFTER styles.css. Does NOT touch #sv-home-root / .sv-root.
  Layout (widths, positions, grid, z-index) is preserved — only colors, fonts,
  borders, radii, shadows, and hovers are changed.
*/

/* ── Font import (match sv-home.css) ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ────────────────────────────────────────────────────────────
   GLOBAL BODY + SELECTION
   ──────────────────────────────────────────────────────────── */
body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-b) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* ── Headings across the shell use display font ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-d);
  color: var(--ink);
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR
   ──────────────────────────────────────────────────────────── */
.sidebar,
#sidebar {
  background: var(--card) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: none;
}

/* Collapsed hover reveal shadow — keep warm */
body.collapsed-sidebar .sidebar:hover {
  box-shadow: 4px 0 24px rgba(40, 34, 20, 0.10) !important;
}

/* ── Sidebar header / brand ── */
.sidebar-header {
  border-bottom: 1px solid var(--line) !important;
  background: var(--card) !important;
}

.sidebar-brand {
  font-family: var(--font-d) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
}

.sidebar-logo {
  border-radius: 9px !important;
  background: var(--ink) !important;
}

/* ── Sidebar nav section labels ── */
.sidebar-nav-label {
  color: var(--ink-3) !important;
  font-family: var(--font-b) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

/* ── Sidebar nav items ── */
.sidebar-nav-item {
  color: var(--ink-2) !important;
  border-radius: 10px !important;
  font-family: var(--font-b) !important;
  font-size: 13.5px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.sidebar-nav-item:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}

.sidebar-nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  font-weight: 600 !important;
}

/* icon within active item */
.sidebar-nav-item.active .sidebar-item-icon {
  color: var(--accent) !important;
}

.sidebar-item-icon {
  border-radius: 7px !important;
  color: var(--ink-3) !important;
}

.sidebar-nav-item:hover .sidebar-item-icon {
  color: var(--ink) !important;
}

.sidebar-item-text {
  font-family: var(--font-b) !important;
  color: inherit !important;
}

.sidebar-item-arrow {
  color: var(--ink-3) !important;
}

/* ── Sub-items ── */
.sidebar-sub-item {
  color: var(--ink-3) !important;
  font-family: var(--font-b) !important;
  border-radius: 8px !important;
}

.sidebar-sub-item:hover {
  color: var(--ink) !important;
  background: var(--paper-2) !important;
}

.sidebar-sub-item.active {
  color: var(--accent-ink) !important;
  background: var(--accent-soft) !important;
  font-weight: 600 !important;
}

/* ── Sidebar footer / toggle ── */
.sidebar-footer {
  border-top: 1px solid var(--line) !important;
  background: var(--card) !important;
}

.sidebar-toggle {
  border: 1px solid var(--line-2) !important;
  border-radius: 9px !important;
  color: var(--ink-3) !important;
  background: transparent !important;
}

.sidebar-toggle:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}

/* collapsed sidebar "Hover to open" text */
body.collapsed-sidebar .sidebar::after {
  color: var(--ink-3) !important;
}

/* ── Upgrade nudge (if present in sidebar) ── */
#sidebarUpgradeNudge {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--line) !important;
}

/* ────────────────────────────────────────────────────────────
   TOPBAR
   ──────────────────────────────────────────────────────────── */
.topbar,
#topbar {
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border-bottom: 1px solid transparent !important;
}

.topbar.pinned,
#topbar.pinned {
  border-bottom-color: var(--line) !important;
  box-shadow: 0 1px 8px rgba(40, 34, 20, 0.05) !important;
}

.topbar-hamburger {
  color: var(--ink) !important;
}

/* ── Breadcrumbs ── */
.topbar-crumbs {
  font-family: var(--font-b) !important;
}

.topbar-crumbs a {
  color: var(--ink-3) !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.topbar-crumbs a:hover {
  color: var(--accent-ink) !important;
}

.topbar-crumbs .sep {
  color: var(--line-2) !important;
  opacity: 1 !important;
}

.topbar-crumbs .current {
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-family: var(--font-b) !important;
}

/* ────────────────────────────────────────────────────────────
   SEARCH BOX (topbar)
   ──────────────────────────────────────────────────────────── */
.search-box input {
  background: var(--card) !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: 999px !important;
  font-family: var(--font-b) !important;
  color: var(--ink) !important;
}

.search-box input::placeholder {
  color: var(--ink-3) !important;
}

.search-box input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  width: 280px;
}

.search-box-icon {
  color: var(--ink-3) !important;
}

.search-box-kbd {
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-3) !important;
  border-radius: 6px !important;
  font-family: var(--font-b) !important;
}

/* ── Search results dropdown ── */
.search-results {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
}

.search-hit {
  border-bottom: 1px solid var(--line) !important;
}

.search-hit:hover,
.search-hit.hl {
  background: var(--accent-soft) !important;
}

.search-hit-title {
  color: var(--ink) !important;
  font-family: var(--font-b) !important;
  font-weight: 600 !important;
}

.search-hit-crumb {
  color: var(--ink-3) !important;
  font-family: var(--font-b) !important;
}

.search-empty {
  color: var(--ink-3) !important;
  font-family: var(--font-b) !important;
}

/* ────────────────────────────────────────────────────────────
   SETTINGS BUTTON (topbar icon)
   ──────────────────────────────────────────────────────────── */
.settings-btn {
  background: var(--card) !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: 10px !important;
  color: var(--ink-2) !important;
}

.settings-btn:hover {
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ────────────────────────────────────────────────────────────
   SETTINGS MODAL
   ──────────────────────────────────────────────────────────── */
.settings-modal {
  background: var(--card) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--line) !important;
}

.settings-header h3 {
  font-family: var(--font-d) !important;
  color: var(--ink) !important;
  letter-spacing: -0.025em !important;
}

.settings-close {
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  color: var(--ink-3) !important;
}

.settings-close:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}

.settings-card {
  border: 2px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--paper) !important;
}

.settings-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow) !important;
}

.settings-card.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

.settings-card-name {
  font-family: var(--font-d) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.settings-card-desc {
  color: var(--ink-3) !important;
  font-family: var(--font-b) !important;
}

/* ────────────────────────────────────────────────────────────
   BUTTONS across the vanilla shell
   (not inside .sv-root which has its own .btn rules)
   ──────────────────────────────────────────────────────────── */

/* Generic button reset to editorial style */
button:not(.sv-root button):not(.sidebar-toggle):not(.sidebar-nav-item):not(.settings-btn):not(.settings-close):not(.topbar-hamburger):not(.search-results *) {
  font-family: var(--font-b);
}

/* Primary / solid shell buttons — anything with btn-primary / btn-solid / .btn classes outside sv-root */
.btn-primary,
.shell-btn,
button.primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px !important;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--font-b) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}

.btn-primary:hover,
.shell-btn:hover,
button.primary:hover {
  background: #000 !important;
  border-color: #000 !important;
}

.btn-primary:active,
.shell-btn:active,
button.primary:active {
  transform: translateY(1px) !important;
}

/* Accent buttons */
.btn-accent {
  border-radius: 999px !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-b) !important;
  font-weight: 600 !important;
}

.btn-accent:hover {
  background: var(--accent-deep, oklch(0.42 0.07 172)) !important;
  border-color: var(--accent-deep, oklch(0.42 0.07 172)) !important;
}

/* Ghost / outline buttons */
.btn-ghost,
button.ghost {
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  font-family: var(--font-b) !important;
  font-weight: 600 !important;
}

.btn-ghost:hover,
button.ghost:hover {
  background: var(--paper-2) !important;
  border-color: var(--ink) !important;
}

/* ────────────────────────────────────────────────────────────
   MAIN CONTENT AREA background
   ──────────────────────────────────────────────────────────── */
.main-area {
  background: var(--paper) !important;
}

/* ────────────────────────────────────────────────────────────
   SCROLLBARS — subtle warm tone
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
}

/* Sidebar scrollable nav gets slightly thinner scrollbar */
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--line-2);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR OVERLAY (mobile)
   ──────────────────────────────────────────────────────────── */
.sidebar-overlay {
  background: rgba(24, 22, 18, 0.45) !important;
}

/* ────────────────────────────────────────────────────────────
   MARQUEE BAR (if visible in shell)
   ──────────────────────────────────────────────────────────── */
.marquee-bar {
  background: var(--ink) !important;
  color: var(--paper) !important;
}