/*
 * RugWeather — shared web aesthetic
 *
 * This layer intentionally applies only to browser mode.
 * The installed PWA keeps its existing app shell and bottom navigation.
 * The visual language is based on index.html:
 * - near-black cinematic canvas
 * - warm cream typography
 * - restrained orange accents
 * - subtle borders / glassy surfaces
 * - Inter throughout (no Merriweather/serif headings)
 */

html.browser-mode {
  --web-black: #090909;
  --web-black-2: #10100f;
  --web-panel: #151412;
  --web-panel-2: #1b1815;
  --web-cream: #f4eee4;
  --web-white: #f8f2e9;
  --web-muted: #a9a197;
  --web-muted-2: #7f786f;
  --web-line: rgba(244, 238, 228, 0.12);
  --web-orange: #e47a35;
  --web-orange-2: #f09a5a;
  --web-green: #53604b;
  --web-radius: 18px;
}

html.browser-mode,
html.browser-mode body {
  background: var(--web-black) !important;
  color: var(--web-cream) !important;
}

html.browser-mode body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background:
    radial-gradient(ellipse 75% 55% at 82% 8%, rgba(118, 67, 37, .18), transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 55%, rgba(69, 41, 25, .13), transparent 65%),
    linear-gradient(180deg, #090909 0%, #11100e 55%, #090909 100%) !important;
}

html.browser-mode body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 24%, rgba(228, 122, 53, .045), transparent 24rem),
    radial-gradient(circle at 12% 78%, rgba(132, 76, 43, .045), transparent 26rem);
}

/* ---------------- Shared web navbar ---------------- */

html.browser-mode .site-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 1.05rem clamp(1.25rem, 5vw, 4rem) !important;
  background: rgba(9, 9, 9, .84) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 238, 228, .08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html.browser-mode .site-navbar-inner {
  width: 100%;
  max-width: 1180px !important;
}

html.browser-mode .site-brand {
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}

html.browser-mode .site-nav-links {
  gap: .15rem !important;
}

html.browser-mode .site-nav-links a,
html.browser-mode .site-nav-links .nav-link-button {
  color: rgba(255,255,255,.78) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  padding: .58rem .78rem !important;
  background: transparent !important;
}

html.browser-mode .site-nav-links a:hover,
html.browser-mode .site-nav-links a:focus-visible,
html.browser-mode .site-nav-links .nav-link-button:hover,
html.browser-mode .site-nav-links .nav-link-button:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}

html.browser-mode .site-nav-links .nav-pill {
  background: var(--web-cream) !important;
  color: #171310 !important;
  padding-inline: 1.15rem !important;
}

html.browser-mode .site-nav-links .nav-pill:hover,
html.browser-mode .site-nav-links .nav-pill:focus-visible {
  background: #fffaf2 !important;
  color: #171310 !important;
}

/* ---------------- Typography ---------------- */

html.browser-mode h1,
html.browser-mode h2,
html.browser-mode h3,
html.browser-mode h4,
html.browser-mode h5,
html.browser-mode h6,
html.browser-mode .page-title,
html.browser-mode .app-hero h1,
html.browser-mode .card-title h2,
html.browser-mode .card-title h3,
html.browser-mode .auth-copy h1,
html.browser-mode .premium-hero-card h1,
html.browser-mode .offline-card h1 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--web-white) !important;
  letter-spacing: -.045em !important;
}

html.browser-mode h1 {
  font-weight: 500 !important;
  line-height: .98 !important;
}

html.browser-mode h2 {
  font-weight: 500 !important;
  line-height: 1.02 !important;
}

html.browser-mode h3,
html.browser-mode h4,
html.browser-mode h5,
html.browser-mode h6 {
  font-weight: 650 !important;
}

html.browser-mode p,
html.browser-mode li,
html.browser-mode label,
html.browser-mode .muted,
html.browser-mode .page-subtitle,
html.browser-mode .form-help {
  color: var(--web-muted) !important;
}

html.browser-mode .eyebrow,
html.browser-mode .section-label,
html.browser-mode .rw-eyebrow {
  color: #c8b9a5 !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: .67rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

/* ---------------- Common page shells ---------------- */

html.browser-mode .app-page,
html.browser-mode .dashboard-page,
html.browser-mode .auth-page,
html.browser-mode .offline-page {
  background: transparent !important;
  color: var(--web-cream) !important;
}

html.browser-mode .app-page {
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem) !important;
}

html.browser-mode .app-container {
  max-width: 1180px !important;
}

html.browser-mode .app-hero,
html.browser-mode .topbar-panel,
html.browser-mode .auth-copy,
html.browser-mode .auth-card,
html.browser-mode .legal-card,
html.browser-mode .offline-card,
html.browser-mode .app-card,
html.browser-mode .settings-card,
html.browser-mode .horses-manager-card,
html.browser-mode .horse-row,
html.browser-mode .premium-showcase,
html.browser-mode .locked-premium-preview {
  color: var(--web-cream) !important;
  background:
    linear-gradient(145deg, rgba(24, 22, 19, .96), rgba(15, 15, 14, .97)) !important;
  border: 1px solid rgba(244, 238, 228, .11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.25) !important;
}

html.browser-mode .app-hero {
  border-radius: 20px !important;
}

html.browser-mode .app-card,
html.browser-mode .settings-card,
html.browser-mode .horse-row {
  border-radius: 18px !important;
}

html.browser-mode .app-card:hover,
html.browser-mode .horse-row:hover {
  border-color: rgba(228,122,53,.25) !important;
}

/* Make the page-specific light backgrounds transparent so they inherit the
   same cinematic canvas rather than creating white blocks between sections. */
html.browser-mode .dashboard-page,
html.browser-mode .dashboard-main,
html.browser-mode .horses-page,
html.browser-mode .account-page,
html.browser-mode .premium-page,
html.browser-mode .learn-page,
html.browser-mode .auth-page,
html.browser-mode .legal-page,
html.browser-mode .marketing-page {
  background: transparent !important;
}

/* ---------------- Forms ---------------- */

html.browser-mode .form-control,
html.browser-mode .form-select,
html.browser-mode input[type="text"],
html.browser-mode input[type="email"],
html.browser-mode input[type="password"],
html.browser-mode input[type="number"],
html.browser-mode input[type="file"],
html.browser-mode select,
html.browser-mode textarea,
html.browser-mode .rw-register-form input {
  background: rgba(255,255,255,.045) !important;
  color: var(--web-white) !important;
  border: 1px solid rgba(244,238,228,.13) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
}

html.browser-mode input::placeholder,
html.browser-mode textarea::placeholder {
  color: #746d65 !important;
}

html.browser-mode .form-control:focus,
html.browser-mode .form-select:focus,
html.browser-mode input:focus,
html.browser-mode select:focus,
html.browser-mode textarea:focus {
  border-color: rgba(228,122,53,.72) !important;
  box-shadow: 0 0 0 4px rgba(228,122,53,.12) !important;
}

/* ---------------- Buttons / links ---------------- */

html.browser-mode .btn,
html.browser-mode button.btn,
html.browser-mode .primary-button,
html.browser-mode .primary-link-button {
  background: var(--web-cream) !important;
  color: #171310 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

html.browser-mode .btn:hover,
html.browser-mode button.btn:hover,
html.browser-mode .primary-button:hover,
html.browser-mode .primary-link-button:hover {
  background: #fffaf2 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
}

html.browser-mode .btn-secondary,
html.browser-mode .secondary-link-button,
html.browser-mode .btn-outline {
  background: transparent !important;
  color: var(--web-cream) !important;
  border: 1px solid rgba(244,238,228,.18) !important;
  box-shadow: none !important;
}

html.browser-mode .btn-secondary:hover,
html.browser-mode .secondary-link-button:hover,
html.browser-mode .btn-outline:hover {
  background: rgba(255,255,255,.06) !important;
}

html.browser-mode .btn-dark {
  background: #f4eee4 !important;
  color: #171310 !important;
}

/* ---------------- App-specific shared surfaces ---------------- */

html.browser-mode .card-icon,
html.browser-mode .empty-mark,
html.browser-mode .horse-photo.placeholder {
  background: rgba(228,122,53,.10) !important;
  color: var(--web-orange-2) !important;
}

html.browser-mode .location-chip,
html.browser-mode .location-summary,
html.browser-mode .meta-list div,
html.browser-mode .subscription-notice,
html.browser-mode .recommendation-feedback,
html.browser-mode .forecast-tabs,
html.browser-mode .forecast-timeline,
html.browser-mode .yard-location-card,
html.browser-mode .install-app-card,
html.browser-mode .collapsible-chevron,
html.browser-mode .suggestion-chevron {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(244,238,228,.10) !important;
  color: var(--web-cream) !important;
}

html.browser-mode .location-chip small,
html.browser-mode .meta-list dt,
html.browser-mode .location-summary span,
html.browser-mode .horse-main p,
html.browser-mode .quiet-note {
  color: var(--web-muted-2) !important;
}

html.browser-mode .badge {
  background: rgba(228,122,53,.10) !important;
  color: #efc5a8 !important;
  border-color: rgba(228,122,53,.14) !important;
}

html.browser-mode .badge.premium {
  background: var(--web-cream) !important;
  color: #171310 !important;
}

/* ---------------- Legal / auth ---------------- */

html.browser-mode .legal-card h2,
html.browser-mode .legal-card h3 {
  color: var(--web-white) !important;
}

html.browser-mode .legal-updated,
html.browser-mode .legal-note,
html.browser-mode .auth-helper-link,
html.browser-mode .auth-footer {
  background: rgba(255,255,255,.035) !important;
  color: var(--web-muted) !important;
  border-color: rgba(244,238,228,.10) !important;
}

html.browser-mode .auth-helper-link a,
html.browser-mode .auth-footer a,
html.browser-mode .legal-card a {
  color: var(--web-orange-2) !important;
}

html.browser-mode .offline-card {
  text-align: left;
}

html.browser-mode .offline-icon {
  background: rgba(228,122,53,.10) !important;
  color: var(--web-orange-2) !important;
}

/* ---------------- Flash messages ---------------- */

html.browser-mode .flash,
html.browser-mode .alert,
html.browser-mode .flash-message {
  background: rgba(21,20,18,.96) !important;
  border-color: rgba(244,238,228,.12) !important;
  color: var(--web-cream) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.25) !important;
}

html.browser-mode .flash__title,
html.browser-mode .flash__message {
  color: var(--web-white) !important;
}

/* ---------------- Footer ---------------- */

html.browser-mode .site-footer {
  background: #090909 !important;
  color: #777168 !important;
  padding-bottom: 2rem !important;
}

html.browser-mode .site-footer-inner {
  max-width: 1180px !important;
  border-top-color: rgba(255,255,255,.10) !important;
}

html.browser-mode .site-footer a {
  color: #a59d92 !important;
}

html.browser-mode .site-footer-attribution {
  color: #827a71 !important;
}

html.browser-mode .site-footer-attribution:hover,
html.browser-mode .site-footer-attribution:focus-visible {
  color: #c8c0b6 !important;
}

html.browser-mode .site-footer-attribution img {
  opacity: .72;
}

html.browser-mode .site-footer a:hover,
html.browser-mode .site-footer a:focus-visible {
  color: #fff !important;
}

/* ---------------- Keep PWA completely out of this layer ---------------- */

@media (max-width: 760px) {
  html.browser-mode .site-navbar {
    padding: .85rem 1rem !important;
  }

  html.browser-mode .site-nav-links {
    gap: .05rem !important;
  }

  html.browser-mode .site-nav-links a,
  html.browser-mode .site-nav-links .nav-link-button {
    padding: .5rem .55rem !important;
    font-size: .78rem !important;
  }

  html.browser-mode .site-nav-links a:nth-child(n+5),
  html.browser-mode .site-nav-links .nav-inline-form {
    /* Keep the shared desktop navbar usable on small browser widths. */
  }

  html.browser-mode .app-page {
    padding: .9rem .85rem 2rem !important;
  }
}

@media (max-width: 560px) {
  html.browser-mode .site-navbar-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }

  html.browser-mode .site-nav-links {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    padding-bottom: .1rem;
    scrollbar-width: none;
  }

  html.browser-mode .site-nav-links::-webkit-scrollbar {
    display: none;
  }

  html.browser-mode .site-nav-links a,
  html.browser-mode .site-nav-links .nav-link-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

}


/* ---------------- Shared legal-page aesthetic (web + installed PWA) ---------------- */
html.browser-mode body.legal-page,
html.pwa-mode body.legal-page {
  background:
    radial-gradient(ellipse 75% 55% at 82% 8%, rgba(118, 67, 37, .18), transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 55%, rgba(69, 41, 25, .13), transparent 65%),
    linear-gradient(180deg, #090909 0%, #11100e 55%, #090909 100%) !important;
  color: #f4eee4 !important;
}

html.browser-mode body.legal-page::before,
html.pwa-mode body.legal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 24%, rgba(228, 122, 53, .045), transparent 24rem),
    radial-gradient(circle at 12% 78%, rgba(132, 76, 43, .045), transparent 26rem);
}

html.browser-mode body.legal-page .app-page,
html.pwa-mode body.legal-page .app-page {
  background: transparent !important;
  color: #f4eee4 !important;
}

html.browser-mode body.legal-page .app-hero,
html.browser-mode body.legal-page .legal-card,
html.pwa-mode body.legal-page .app-hero,
html.pwa-mode body.legal-page .legal-card {
  color: #f4eee4 !important;
  background:
    linear-gradient(145deg, rgba(24, 22, 19, .96), rgba(15, 15, 14, .97)) !important;
  border: 1px solid rgba(244, 238, 228, .11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.25) !important;
}

html.browser-mode body.legal-page .app-hero,
html.pwa-mode body.legal-page .app-hero {
  border-radius: 20px !important;
}

html.browser-mode body.legal-page .legal-card,
html.pwa-mode body.legal-page .legal-card {
  border-radius: 18px !important;
}

html.browser-mode body.legal-page .legal-card h2,
html.browser-mode body.legal-page .legal-card h3,
html.pwa-mode body.legal-page .legal-card h2,
html.pwa-mode body.legal-page .legal-card h3 {
  color: #f8f2e9 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.045em !important;
}

html.browser-mode body.legal-page .legal-card h2,
html.pwa-mode body.legal-page .legal-card h2 {
  font-weight: 500 !important;
}

html.browser-mode body.legal-page .legal-card h3,
html.pwa-mode body.legal-page .legal-card h3 {
  font-weight: 650 !important;
}

html.browser-mode body.legal-page .legal-card p,
html.browser-mode body.legal-page .legal-card li,
html.pwa-mode body.legal-page .legal-card p,
html.pwa-mode body.legal-page .legal-card li {
  color: #a9a197 !important;
}

html.browser-mode body.legal-page .legal-card a,
html.pwa-mode body.legal-page .legal-card a {
  color: #f09a5a !important;
}

html.browser-mode body.legal-page .eyebrow,
html.pwa-mode body.legal-page .eyebrow {
  color: #c8b9a5 !important;
}

html.browser-mode body.legal-page .app-hero > p:last-child,
html.pwa-mode body.legal-page .app-hero > p:last-child {
  color: #a9a197 !important;
}

html.browser-mode body.legal-page .legal-updated,
html.browser-mode body.legal-page .legal-note,
html.pwa-mode body.legal-page .legal-updated,
html.pwa-mode body.legal-page .legal-note {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(244,238,228,.10) !important;
  color: #a9a197 !important;
}

html.browser-mode body.legal-page .legal-updated strong,
html.browser-mode body.legal-page .legal-note strong,
html.pwa-mode body.legal-page .legal-updated strong,
html.pwa-mode body.legal-page .legal-note strong {
  color: #f4eee4 !important;
}

html.browser-mode body.legal-page .btn,
html.pwa-mode body.legal-page .btn {
  background: #f4eee4 !important;
  color: #171310 !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

html.browser-mode body.legal-page .site-footer,
html.pwa-mode body.legal-page .site-footer {
  background: #090909 !important;
  color: #777168 !important;
}