/*
 * USL Web port of TabNook's Ocean skin.
 * Scoped to body[data-skin="ocean"]. The admin console loads this file; its own chrome is bridged in admin/admin-skin.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560;9..144,680&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap');


html[data-skin="ocean"] {
  background-color: #041821 !important;
  background-image: linear-gradient(180deg, #f3e2c4 0%, #b7e4ea 9%, #5ec4c8 20%, #1a7a86 36%, #0c4a5c 54%, #063044 74%, #041821 100%) !important;
  background-attachment: fixed !important;
}
body[data-skin="ocean"] { background: transparent !important; }
body[data-skin="ocean"]::before {
  content: "";
  position: fixed; inset: 0;
  background: url('/assets/skins/ocean/caustics.webp') 0 0 / 720px 720px repeat;
  opacity: 0.28; pointer-events: none; z-index: 0;
}
body[data-skin="ocean"] > *:not(#usl-skin-panel):not(#usl-skin-backdrop) { position: relative; z-index: 1; }
/* The lockup sits on the sand band of the page gradient. A content-sized
   sea-glass card (same radius, border, and shadow as the topic tiles) keeps
   the title and logo readable without a full-width hard rectangle. */
body[data-skin="ocean"] .home-banner { background: transparent !important; }
body[data-skin="ocean"] .home-wordmark {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 10px auto 6px;
  padding: 14px 28px 12px;
  background: #e7f6f4 !important;
  color: #062433 !important;
  border: 1px solid rgba(14, 76, 92, 0.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(4, 24, 33, 0.18) !important;
}
body[data-skin="ocean"] .store-hero,
body[data-skin="ocean"] .reader-hero,
body[data-skin="ocean"] .disc-note,
body[data-skin="ocean"] .section-head {
  background: #e7f6f4 !important;
  color: #062433 !important;
}
body[data-skin="ocean"] .home-wordmark-title,
body[data-skin="ocean"] .store-hero h1,
body[data-skin="ocean"] .section-head {
  color: #062433 !important;
}
body[data-skin="ocean"] .store-lede,
body[data-skin="ocean"] .reader-lede,
body[data-skin="ocean"] .disc-note {
  color: #3d5c66 !important;
}

body[data-skin="ocean"] {
  --skin-radius-card: 16px;
  --skin-radius-input: 16px;
  --skin-surface: #e7f6f4;
  --skin-border: rgba(14,76,92,0.28);
  --skin-text: #0b2a34;
  --skin-text-muted: #3d5c66;
  --skin-text-link: #8c3426;
  --skin-shadow: 0 8px 20px rgba(4,24,33,0.18);
  --skin-font-display: 'Fraunces', Georgia, serif;
  --skin-font-body: 'Nunito Sans', system-ui, sans-serif;
  color-scheme: dark;
  background: transparent !important;
  color: #0b2a34 !important;
  font-family: var(--skin-font-body);
}

body[data-skin="ocean"] h1,
body[data-skin="ocean"] h2,
body[data-skin="ocean"] h3,
body[data-skin="ocean"] .home-wordmark-title,
body[data-skin="ocean"] .section-head {
  font-family: var(--skin-font-display) !important;
  color: #0b2a34 !important;
  letter-spacing: 0;
  text-shadow: none;
}
body[data-skin="ocean"] .home-wordmark-title {
  font-size: clamp(1.05rem, 2.2vw + 0.4rem, 1.9rem) !important;
}
body[data-skin="ocean"] .ft-name {
  font-family: var(--skin-font-body) !important;
  color: #0b2a34 !important;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
}

body[data-skin="ocean"] a { color: #8c3426; }
body[data-skin="ocean"] a:hover { color: #0b2a34; }

body[data-skin="ocean"] p,
body[data-skin="ocean"] li,
body[data-skin="ocean"] label,
body[data-skin="ocean"] .lede,
body[data-skin="ocean"] .site-desc,
body[data-skin="ocean"] .store-lede,
body[data-skin="ocean"] .disc-note,
body[data-skin="ocean"] .text-muted,
body[data-skin="ocean"] .form-text {
  color: #3d5c66 !important;
}

body[data-skin="ocean"] .tile-row {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
body[data-skin="ocean"] .facet-tile .ft-name {
  font-size: 0.92rem !important;
  letter-spacing: 0 !important;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
  text-transform: none;
  text-shadow: none;
  color: #0b2a34 !important;
}
body[data-skin="ocean"] .ft-count,
body[data-skin="ocean"] .topic-count { color: #3d5c66 !important; }

body[data-skin="ocean"] .res-card,
body[data-skin="ocean"] .facet-tile,
body[data-skin="ocean"] .featured-card,
body[data-skin="ocean"] .home-store-card,
body[data-skin="ocean"] .prod-card,
body[data-skin="ocean"] .card,
body[data-skin="ocean"] .lb-box,
body[data-skin="ocean"] .rpt-box,
body[data-skin="ocean"] .store-lb-box,
body[data-skin="ocean"] .sidebar,
body[data-skin="ocean"] .usl-situation,
body[data-skin="ocean"] .site-foot {
  position: relative;
  background: var(--skin-surface) !important;
  color: #0b2a34 !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--skin-shadow) !important;
}

body[data-skin="ocean"] .res-card h5,
body[data-skin="ocean"] .featured-card h5,
body[data-skin="ocean"] .home-store-title,
body[data-skin="ocean"] .prod-card h2,
body[data-skin="ocean"] .pc-title {
  color: #0b2a34 !important;
  font-family: var(--skin-font-display);
}
body[data-skin="ocean"] .res-card p,
body[data-skin="ocean"] .featured-card p,
body[data-skin="ocean"] .pc-blurb,
body[data-skin="ocean"] .pc-price {
  color: #3d5c66 !important;
}

body[data-skin="ocean"] .type-chip,
body[data-skin="ocean"] .cat-chip,
body[data-skin="ocean"] .topic-pills a,
body[data-skin="ocean"] .rb-saved {
  background: #a33e2e !important;
  color: #ffffff !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 16px !important;
}
body[data-skin="ocean"] .type-chip:hover,
body[data-skin="ocean"] .cat-chip.on,
body[data-skin="ocean"] .topic-pills a[aria-current="page"] {
  background: #041821 !important;
  color: #0b2a34 !important;
}

body[data-skin="ocean"] #navbar-placeholder .navbar {
  background: #e7f6f4 !important;
  border-bottom: 2px solid rgba(14,76,92,0.28);
  box-shadow: none !important;
  position: sticky;
  z-index: 1030;
}
body[data-skin="ocean"] #navbar-placeholder .navbar-brand,
body[data-skin="ocean"] #navbar-placeholder .navbar-brand-text,
body[data-skin="ocean"] #navbar-placeholder .nav-link {
  color: #0b2a34 !important;
  font-family: 'Rajdhani', var(--skin-font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none;
}
body[data-skin="ocean"] #navbar-placeholder .btn-store,
body[data-skin="ocean"] #navbar-placeholder .btn-suggest,
body[data-skin="ocean"] #navbar-placeholder .btn-contact,
body[data-skin="ocean"] #navbar-placeholder .btn-reader,
body[data-skin="ocean"] #navbar-placeholder .btn-videos,
body[data-skin="ocean"] #navbar-placeholder .btn-topics,
body[data-skin="ocean"] #navbar-placeholder .btn-library,
body[data-skin="ocean"] #navbar-placeholder .btn-auth,
body[data-skin="ocean"] .home-store-cta,
body[data-skin="ocean"] .btn,
body[data-skin="ocean"] .btn-primary,
body[data-skin="ocean"] .btn-dark,
body[data-skin="ocean"] .btn-amazon,
body[data-skin="ocean"] .load-more,
body[data-skin="ocean"] .rc-btn,
body[data-skin="ocean"] .rpt-submit,
body[data-skin="ocean"] .rpt-cancel {
  font-family: 'Rajdhani', var(--skin-font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none;
  border-radius: 16px !important;
}
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-store,
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-suggest,
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-contact,
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-reader,
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-videos,
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-topics,
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-library,
body[data-skin="ocean"] #navbar-placeholder .navbar-nav .btn-auth {
  font-size: 0.92rem;
  box-shadow: none !important;
}
body[data-skin="ocean"] #navbar-placeholder .btn-store,
body[data-skin="ocean"] .home-store-cta,
body[data-skin="ocean"] .btn-primary,
body[data-skin="ocean"] .btn-dark,
body[data-skin="ocean"] .btn-amazon,
body[data-skin="ocean"] .rpt-submit {
  background: #a33e2e !important;
  color: #ffffff !important;
  border-color: #a33e2e !important;
}
body[data-skin="ocean"] #navbar-placeholder .btn-suggest {
  background: transparent !important;
  color: #0b2a34 !important;
  border-color: rgba(14,76,92,0.28) !important;
}
body[data-skin="ocean"] #navbar-placeholder .btn-contact,
body[data-skin="ocean"] #navbar-placeholder .btn-reader,
body[data-skin="ocean"] #navbar-placeholder .btn-videos,
body[data-skin="ocean"] #navbar-placeholder .btn-topics,
body[data-skin="ocean"] #navbar-placeholder .btn-library,
body[data-skin="ocean"] #navbar-placeholder .btn-auth {
  background: transparent !important;
  color: #0b2a34 !important;
  border-color: rgba(14,76,92,0.28) !important;
}
body[data-skin="ocean"] #navbar-placeholder .usl-theme-toggle,
body[data-skin="ocean"] #navbar-placeholder .usl-saved-toggle,
body[data-skin="ocean"] #navbar-placeholder .usl-skin-btn {
  background: #e7f6f4;
  color: #0b2a34;
  border: 1px solid rgba(14,76,92,0.28);
  border-radius: 50%;
  box-shadow: none;
}

body[data-skin="ocean"] .form-control,
body[data-skin="ocean"] select,
body[data-skin="ocean"] textarea,
body[data-skin="ocean"] .header-search input,
body[data-skin="ocean"] .sort-sel,
body[data-skin="ocean"] .store-search input {
  background: #e7f6f4 !important;
  color: #0b2a34 !important;
  border: 1px solid rgba(14,76,92,0.28) !important;
  border-radius: var(--skin-radius-input, 8px) !important;
  font-family: var(--skin-font-body) !important;
}
body[data-skin="ocean"] .form-control::placeholder,
body[data-skin="ocean"] .header-search input::placeholder { color: #3d5c66; }
body[data-skin="ocean"] .header-search i,
body[data-skin="ocean"] .store-search i { color: #0b2a34 !important; }

body[data-skin="ocean"] .suggest {
  background: #e7f6f4 !important;
  color: #0b2a34 !important;
  border: 1px solid var(--skin-border) !important;
  z-index: 1060;
}
body[data-skin="ocean"] .suggest div { color: #0b2a34 !important; }

body[data-skin="ocean"] .usl-situation-headline,
body[data-skin="ocean"] .usl-situation-copy,
body[data-skin="ocean"] .usl-situation-kicker { color: #0b2a34 !important; }
body[data-skin="ocean"] .site-foot,
body[data-skin="ocean"] .site-foot .foot-copy { color: #3d5c66 !important; }
/* The copyright line must sit on the sea-glass footer, not a separate abyss bar. */
body[data-skin="ocean"] .site-foot .foot-copy { background: transparent !important; }
body[data-skin="ocean"] .site-foot a { color: #8c3426 !important; }

body[data-skin="ocean"] .dropdown-menu {
  background: #e7f6f4 !important;
  color: #0b2a34 !important;
  border: 1px solid var(--skin-border) !important;
}
body[data-skin="ocean"] .dropdown-item { color: #0b2a34 !important; }
body[data-skin="ocean"] .dropdown-item:hover,
body[data-skin="ocean"] .dropdown-item:focus {
  background: #a33e2e !important;
  color: #ffffff !important;
}

body[data-skin="ocean"] .lb-overlay,
body[data-skin="ocean"] .rpt-overlay,
body[data-skin="ocean"] .store-lb,
body[data-skin="ocean"] .modal { z-index: 1080; }
body[data-skin="ocean"] .modal-content {
  background: var(--skin-surface) !important;
  color: #0b2a34 !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--skin-shadow) !important;
}

body[data-skin="ocean"] .result-bar,
body[data-skin="ocean"] .header-stat,
body[data-skin="ocean"] .header-stat b,
body[data-skin="ocean"] #totalCount,
body[data-skin="ocean"] .rb-count { color: #0b2a34 !important; }

body[data-skin="ocean"] .home-store-photo,
body[data-skin="ocean"] .prod-card .pc-media,
body[data-skin="ocean"] .prod-card .pc-media.has-photo,
body[data-skin="ocean"] .store-lb-imgwrap,
body[data-skin="ocean"] .reader-article-thumb-wrap { background: #041821 !important; }

body[data-skin="ocean"] .reader-sidebar,
body[data-skin="ocean"] .reader-toolbar,
body[data-skin="ocean"] .reader-guest-note,
body[data-skin="ocean"] .reader-article {
  background: var(--skin-surface) !important;
  color: #0b2a34 !important;
  border-color: var(--skin-border) !important;
}
body[data-skin="ocean"] .reader-view-item,
body[data-skin="ocean"] .reader-feed-row,
body[data-skin="ocean"] .reader-sidebar-title,
body[data-skin="ocean"] .reader-stream-title,
body[data-skin="ocean"] .reader-lede,
body[data-skin="ocean"] .reader-article-title,
body[data-skin="ocean"] .reader-article-excerpt { color: #0b2a34 !important; }

body[data-skin="ocean"] .btn-outline-dark,
body[data-skin="ocean"] .btn-outline-secondary {
  background: #e7f6f4 !important;
  color: #0b2a34 !important;
  border-color: rgba(14,76,92,0.28) !important;
}

body[data-skin="ocean"] .home-banner { background: transparent !important; }



body[data-skin="ocean"][data-skin-cursors="on"] {
  cursor: url('/assets/skins/ocean/defaultarrow.png') 0 0, default !important;
}
body[data-skin="ocean"][data-skin-cursors="on"] a,
body[data-skin="ocean"][data-skin-cursors="on"] button,
body[data-skin="ocean"][data-skin-cursors="on"] [role="button"],
body[data-skin="ocean"][data-skin-cursors="on"] .btn,
body[data-skin="ocean"][data-skin-cursors="on"] .dropdown-item,
body[data-skin="ocean"][data-skin-cursors="on"] select,
body[data-skin="ocean"][data-skin-cursors="on"] summary,
body[data-skin="ocean"][data-skin-cursors="on"] label[for],
body[data-skin="ocean"][data-skin-cursors="on"] .res-card,
body[data-skin="ocean"][data-skin-cursors="on"] .facet-tile,
body[data-skin="ocean"][data-skin-cursors="on"] .featured-card,
body[data-skin="ocean"][data-skin-cursors="on"] .type-chip,
body[data-skin="ocean"][data-skin-cursors="on"] .prod-card {
  cursor: url('/assets/skins/ocean/pointer.png') 10 0, pointer !important;
}
body[data-skin="ocean"][data-skin-cursors="on"] input,
body[data-skin="ocean"][data-skin-cursors="on"] textarea {
  cursor: url('/assets/skins/ocean/ibeam.png') 16 16, text !important;
}