/* Global styles - Audit Ledger Theme
   Near-black charcoal base, forest green for verified gains,
   rust for losses, bone/amber for neutral accents. No violet. */

:root {
  /* Backgrounds */
  --bg-main: #101412;
  --bg-darker: #0b0e0c;
  --bg-elevated: #171c19;
  --bg-surface: #141816;
  --bg-highlight: #1e2620;

  /* Text */
  --text: #aeb4a8;
  --text-bright: #e9e6da;
  --text-muted: #707a6e;
  --text-dim: #49524a;

  /* Accents */
  --primary: #4c9268;
  --primary-dark: #35714d;
  --secondary: #c9a45c;
  --success: #5da97a;
  --success-dark: #47875f;
  --danger: #c25f4c;
  --danger-dark: #9d4738;
  --warning: #c9a45c;
  --info: #8ba793;

  /* Borders & Focus */
  --border: #262e28;
  --border-light: #1c231d;
  --ring: rgba(76, 146, 104, 0.35);

  /* Header */
  --header-bg: rgba(11, 14, 12, 0.92);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  color: var(--text);
  /* Inter led this stack but was never loaded, so body text resolved to it
     only for visitors who happened to have it installed locally. The system
     stack is what DESIGN.md specifies for the body role. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-main);
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Header Styles */
.site-header {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(1.2) blur(6px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
  z-index: 1001;
}

.brand:hover {
  transform: scale(1.02);
}

.logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.brand:hover .logo {
  background: var(--primary);
  color: var(--bg-darker);
}

.brand-text {
  letter-spacing: 0.2px;
  color: var(--text-bright);
}

/* Desktop Navigation */
.desktop-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav a {
  color: inherit;
  text-decoration: none;
  padding: 0.5rem 0.3rem;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.nav a:hover::after {
  width: 100%;
}

.nav a.nav-signin-btn {
  padding: 0.45rem 1.15rem;
  border: 1px solid var(--primary);
  border-radius: 2px;
  color: var(--primary);
  font-weight: 600;
}

.nav a.nav-signin-btn::after {
  display: none;
}

.nav a.nav-signin-btn:hover {
  background: var(--primary);
  color: var(--bg-main);
}

/* Mobile Menu Button */
.mobile-menu-button {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: relative;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.burger-line {
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s ease;
  margin: 3px 0;
}

/* Once the panel is open its own close button is the single close affordance.
   Hide the burger rather than morphing it into a second, overlapping X. */
.mobile-menu-button.active {
  opacity: 0;
  visibility: hidden;
}

/* Mobile Overlay */
/* Full-viewport clip layer: keeps the off-canvas menu/overlay from extending
   the document width (horizontal scroll) while it's parked off-screen. */
.mobile-nav-viewport {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  /* Above .site-header (1000) and the .brand / burger inside it (1001).
     Below that, the header painted through the open drawer and its wordmark
     landed on top of the panel title. The drawer carries its own close
     button, so nothing is lost by covering the header. */
  z-index: 1002;
}

.mobile-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 998;
  backdrop-filter: blur(4px);
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Navigation */
.mobile-nav {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: var(--bg-elevated);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  pointer-events: auto;
  overflow-y: auto;
}

.mobile-nav.active {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

/* A panel label, not a headline — it takes the same mono micro-label voice as
   every other label in the system. */
.mobile-nav-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  color: var(--text);
}

.close-button:hover {
  background: var(--bg-surface);
  border-color: var(--primary);
  color: var(--primary);
}

.close-button:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.mobile-nav-links {
  padding: 1rem 0;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.mobile-nav-link svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.mobile-nav-link:hover {
  background: linear-gradient(90deg, var(--bg-highlight), transparent);
  border-left-color: var(--primary);
  color: var(--primary);
}

.mobile-nav-link:hover svg {
  color: var(--primary);
  transform: scale(1.1);
}

.mobile-nav-link.logout-link {
  margin-top: 0.5rem;
  color: var(--danger);
}

.mobile-nav-link.logout-link:hover {
  background: rgba(247, 118, 142, 0.1);
  border-left-color: var(--danger);
  color: var(--danger);
}

.mobile-nav-link.logout-link svg {
  color: var(--danger);
}

/* ============ Flash rail ============
   Controller messages, drawn once in the layout directly under the header so
   they read as a stamp on the page just loaded. Same tape idiom as the rest
   of the site — flat panel, hairlines, mono micro-label — with the outcome
   carried by a single thickened edge rather than by a tinted block, so a
   routine "saved" confirmation doesn't shout over the page it sits on. */
.flash-rail {
  padding-top: 1.25rem;
}

.flash {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left-width: 2px;
  background: var(--bg-elevated);
}

.flash + .flash {
  margin-top: 0.5rem;
}

.flash--notice { border-left-color: var(--primary); }
.flash--alert { border-left-color: var(--danger); }

.flash-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.flash--notice .flash-label { color: var(--primary); }
.flash--alert .flash-label { color: var(--danger); }

.flash-text {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-bright);
  overflow-wrap: anywhere;
}

.flash-dismiss {
  flex: none;
  align-self: center;
  padding: 0.25rem;
  border: 0;
  background: none;
  line-height: 0;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease;
}

.flash-dismiss:hover {
  color: var(--text-bright);
}

.flash-dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 2px;
}

/* Narrow: the label keeps the dismiss company on its own line and the message
   takes the full width, rather than three columns squeezing the message into
   a four-word ribbon. */
@media (max-width: 30rem) {
  .flash {
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
  }

  .flash-label { order: 1; }

  .flash-dismiss {
    order: 2;
    margin-left: auto;
  }

  .flash-text {
    order: 3;
    flex: 1 0 100%;
  }
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  margin-top: 2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  background: var(--bg-darker);
  text-align: center;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.footer-disclaimer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  max-width: 62ch;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dim);
  font-size: 0.875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.footer-disclaimer-label {
  flex-shrink: 0;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--warning);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.footer-separator {
  color: var(--text-dim);
}

/* Footer link styling */
.site-footer a {
  color: var(--primary);
  text-decoration: none;
  position: relative;
  font-weight: 600;
  transition: color 0.2s ease;
}

.site-footer a::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer a:hover {
  color: var(--success);
}

.site-footer a:hover::before {
  width: 100%;
}

/* Tablet and Mobile Styles */
@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu-button,
  .mobile-overlay {
    display: flex;
  }

  /* Block, not flex: the panel stacks its header above the links. */
  .mobile-nav {
    display: block;
  }

  .header-row {
    min-height: 60px;
    padding: 0.5rem 0;
  }

  .brand {
    font-size: 1rem;
  }

  .logo {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .container {
    padding: 0 1.25rem;
  }
  
  .mobile-nav-link {
    padding: 1.125rem 1.5rem;
    font-size: 1.05rem;
    min-height: 56px;
  }
  
  .mobile-nav-link svg {
    width: 22px;
    height: 22px;
  }
  
  .site-footer {
    padding: 1.5rem 0;
    font-size: 0.9rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .mobile-nav {
    width: 100%;
    max-width: 100%;
  }

  .brand {
    font-size: 0.95rem;
  }

  .logo {
    width: 30px;
    height: 30px;
  }
  
  .container {
    padding: 0 1rem;
  }
  
  .mobile-nav-link {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }
  
  .mobile-nav-link svg {
    width: 20px;
    height: 20px;
  }
}

/* Search Styles */
.search-section {
  margin-bottom: 2rem;
  background: var(--bg-elevated);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
}

.search-container {
  max-width: 600px;
  margin: 0 auto;
}

.search-form {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.search-input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--bg-surface);
}

.search-icon {
  position: absolute;
  left: 1.25rem;
  font-size: 1.25rem;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s ease;
}

.search-input-wrapper:focus-within .search-icon {
  color: var(--primary);
}

.search-input {
  flex: 1;
  padding: 1rem 1rem 1rem 3.5rem;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-bright);
  outline: none;
  transition: all 0.2s ease;
}

.search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.search-clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bg-highlight);
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid var(--border);
}

.search-clear:hover {
  background: var(--bg-surface);
  color: var(--text);
  transform: translateY(-50%) scale(1.1);
}

.clear-icon {
  font-size: 0.875rem;
  font-weight: 600;
}

.search-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: var(--primary);
  color: var(--bg-main);
  border: none;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.search-btn:hover {
  transform: translateY(-2px);
  background: var(--primary-dark);
}

.search-btn:active {
  transform: translateY(0);
}

.search-btn-text,
.search-btn-icon {
  position: relative;
  z-index: 1;
}

.search-btn-icon {
  font-size: 1.125rem;
}

/* Search results highlight */
/* A result count, not an alert. The 4px amber side-tab and 8px corners it
   carried belonged to no part of this system; a hairline panel states the
   same thing without claiming urgency. */
.search-highlight {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: 2px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: slideIn 0.3s ease-out;
}

.search-results-info {
  color: var(--warning);
  font-size: 0.875rem;
  font-weight: 600;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Profile Dropdown */
.profile-dropdown {
  position: relative;
  display: inline-block;
}

.profile-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background: var(--bg-highlight);
  color: var(--text-bright);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.profile-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.profile-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.profile-button-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-menu.hidden {
  display: none;
}

.profile-menu:not(.hidden) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-menu-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 0.75rem 0.75rem 0 0;
}

.profile-email {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.profile-menu-items {
  padding: 0.5rem;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  font-weight: 500;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.profile-menu-item:hover {
  background: var(--bg-highlight);
  color: var(--primary);
  transform: translateX(2px);
}

.profile-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.profile-menu-item.logout {
  color: var(--danger);
}

.profile-menu-item.logout:hover {
  background: rgba(247, 118, 142, 0.1);
  color: var(--danger);
}

.profile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 1rem;
}

/* Responsive search */
@media (max-width: 768px) {
  .search-section {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .search-form {
    flex-direction: column;
    gap: 1rem;
  }
  
  .search-btn {
    justify-content: center;
    padding: 1rem;
  }
  
  .search-input {
    padding: 0.875rem 0.875rem 0.875rem 3rem;
  }
  
  .search-icon {
    left: 1rem;
  }

  .profile-dropdown {
    display: none;
  }
}

/* Legal Pages (Privacy & Terms) */
.legal-page {
  padding: 3rem 0;
  min-height: calc(100vh - 200px);
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border-radius: 1rem;
  padding: 2.5rem;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.legal-content h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 0.5rem;
}

.legal-updated {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.legal-content section {
  margin-bottom: 2rem;
}

.legal-content section:last-child {
  margin-bottom: 0;
}

.legal-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 0.75rem;
}

.legal-content p {
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.legal-content ul {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.legal-content li {
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 0.5rem;
  position: relative;
}

.legal-content li::marker {
  color: var(--primary);
}

.legal-content a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.legal-content a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .legal-page {
    padding: 2rem 0;
  }

  .legal-content {
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin: 0 0.5rem;
  }

  .legal-content h1 {
    font-size: 1.5rem;
  }

  .legal-content h2 {
    font-size: 1.125rem;
  }
}