/* If this file 404s, pages that only link here still get a dark base from inline html rules where present. */
html {
  background-color: #0f1115;
  min-height: 100%;
}

:root {
  --tahoe-bg-1: #000000;
  --tahoe-bg-2: #02050a;
  --tahoe-bg-3: #040a12;
  --tahoe-glass: rgba(255, 255, 255, 0.1);
  --tahoe-glass-strong: rgba(255, 255, 255, 0.16);
  --tahoe-border: rgba(255, 255, 255, 0.22);
  --tahoe-text: #ffffff;
  --tahoe-text-muted: rgba(255, 255, 255, 0.84);
  --tahoe-shadow: 0 14px 40px rgba(0, 0, 0, 0.62);
  --tahoe-text-on-dark: #ffffff;
  --tahoe-text-on-light: #0b0d12;
  --tahoe-muted-on-dark: rgba(255, 255, 255, 0.84);
  --tahoe-muted-on-light: rgba(11, 13, 18, 0.72);
  /* Shared with legacy inline <style> blocks (this file usually loads after them) */
  --primary: #1a73e8;
  --primary-light: #4285f4;
  --primary-dark: #0d47a1;
  --accent: #ea4335;
  --accent-light: #f28b82;
  --success: #34a853;
  --warning: #fbbc04;
  --bg: #0f1115;
  --surface: #161a22;
  --text: #eef2ff;
  --text-primary: #eef2ff;
  --text-secondary: #c0c8d6;
  --text-tertiary: #8f98aa;
  --muted: #c0c8d6;
  --border: #2c3342;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.45), 0 10px 10px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --radius-sm: 10px;
}

body {
  background:
    radial-gradient(1200px 700px at 14% -8%, #0f2d4a 0%, transparent 48%),
    radial-gradient(1000px 700px at 88% 12%, #10314e 0%, transparent 52%),
    linear-gradient(160deg, var(--tahoe-bg-1) 0%, var(--tahoe-bg-2) 52%, var(--tahoe-bg-3) 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
  color: var(--tahoe-text-on-dark);
}

/* Header only */
.header,
header {
  background: rgba(9, 23, 40, 0.55) !important;
  border-bottom: 1px solid var(--tahoe-border) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-top {
  background: transparent !important;
  color: var(--tahoe-text-muted) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.logo {
  color: var(--tahoe-text-on-dark) !important;
}

.nav-menu {
  gap: 0.55rem !important;
}

/*
 * Minimal header (CTA + language only): opt-in so marketing pages keep the full nav from HTML.
 * Set on <body>: data-tahoe-minimal-nav="1"
 */
body[data-tahoe-minimal-nav="1"] .nav-toggle {
  display: none !important;
}

body[data-tahoe-minimal-nav="1"] .header .nav-menu a:not(.cta-button),
body[data-tahoe-minimal-nav="1"] header .nav-menu a:not(.cta-button) {
  display: none !important;
}

body[data-tahoe-minimal-nav="1"] .header .nav-menu li,
body[data-tahoe-minimal-nav="1"] header .nav-menu li {
  display: none !important;
}

body[data-tahoe-minimal-nav="1"] .header .nav-menu li.tahoe-control-item,
body[data-tahoe-minimal-nav="1"] header .nav-menu li.tahoe-control-item {
  display: inline-flex !important;
}

.cta-button,
.lang-select {
  border-radius: 999px !important;
  border: 1px solid var(--tahoe-border) !important;
  background: var(--tahoe-glass-strong) !important;
  color: var(--tahoe-text-on-dark) !important;
}

.lang-select {
  min-height: 36px;
  padding: 0.4rem 0.7rem;
}

.cta-button:hover,
.lang-select:hover {
  background: var(--tahoe-glass) !important;
}

/* Safe overflow containment only */
.card,
.feature-card,
.section,
.content-section,
.profile-card,
.link-management,
.photo-card,
.folder-card,
.page-header,
.modal-content,
.share-modal-content,
[class*="card"],
[class*="section"] {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

p, li, td, th, small, span, a, h1, h2, h3, h4, h5, h6 {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Dark glossy/base surfaces -> white text */
.header, header, .hero, .cta-section, .photo-modal-overlay,
.modal, .share-modal, .dashboard-container, .wrapper {
  color: var(--tahoe-text-on-dark) !important;
}
.header p, .header span, .hero p, .cta-section p,
.dashboard-container p, .wrapper p {
  color: var(--tahoe-muted-on-dark) !important;
}

/* Primary nav links — not muted (avoids “washed out” bar on About, Contact, etc.) */
.header .nav-menu > a,
.header .nav-menu a.cta-button {
  color: var(--tahoe-text-on-dark) !important;
}

.header .nav-menu > a:hover {
  color: var(--tahoe-text-on-dark) !important;
}

/* Dark glass cards — matches landing / marketing-dark */
.section,
.card,
.feature-card,
.content-section,
.profile-card {
  background: rgba(22, 26, 34, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--tahoe-text-on-dark) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45) !important;
}

.section p,
.card p,
.feature-card p,
.content-section p {
  color: var(--tahoe-muted-on-dark) !important;
}

.section h1,
.section h2,
.section h3,
.card h2,
.card h3,
.feature-card h2,
.feature-card h3 {
  color: var(--tahoe-text-on-dark) !important;
}

/* App surfaces are dark glass — use light text (older tahoe assumed white cards here) */
.page-header,
.folder-card,
.folder-header,
.folder-content,
.photo-info,
.empty-state,
.error-state {
  color: var(--tahoe-text-on-dark) !important;
}

.page-header p,
.folder-content p,
.photo-info p,
.empty-state p,
.error-state p {
  color: var(--tahoe-muted-on-dark) !important;
}

/* Legacy white modals / inline white panels only */
.photo-modal,
.photo-modal-header,
.photo-modal-actions,
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"] {
  color: var(--tahoe-text-on-light) !important;
}

.photo-modal p,
.photo-modal-header p {
  color: var(--tahoe-muted-on-light) !important;
}

table {
  width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
}

img, video, canvas {
  max-width: 100% !important;
  height: auto;
}

pre, code {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
