/* ═══════════════════════════════════════════════════════════════
   Cognitive Docs — Full Visual Override
   Overrides HedgeDoc cover.css (dark theme, #333 bg, #fff text)
   Must use hex/rgb fallbacks (oklch not supported everywhere)
   Must use !important on everything — cover.css is aggressive
   ═══════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════
   1. NUKE HedgeDoc dark cover theme
   ═══════════════════════════════════════ */

html {
  height: auto !important;
  min-height: 100% !important;
}

html,
html body,
body {
  background-color: #f7f7f6 !important;
  background: #f7f7f6 !important;
  color: #1e1e2a !important;
  text-shadow: none !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  height: auto !important;
  min-height: 100vh !important;
}

a,
a:focus,
a:hover {
  color: #1e1e2a !important;
}

.site-wrapper {
  background-color: #f7f7f6 !important;
  background: #f7f7f6 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
}

.site-wrapper-inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  vertical-align: unset !important;
}

.cover-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ═══════════════════════════════════════
   2. HIDE everything unwanted
   ═══════════════════════════════════════ */

/* Top navigation bar — visible, restyled for cognitive.ch */
.masthead,
.masthead.clearfix {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  background: #f7f7f6 !important;
  padding: 1.25rem 2rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #e8e8e5 !important;
  text-shadow: none !important;
  color: #1e1e2a !important;
}

/* Hide sign-in button in nav (redundant with big page button) */
.masthead .ui-signin {
  display: none !important;
}

/* Masthead is always visible — HedgeDoc JS handles showing/hiding
   the correct elements (.ui-signin vs .ui-signout) based on auth state.
   We just hide the redundant small Sign In button in the masthead. */

/* Show nav tabs + profile when logged in */
/* Hide Intro tab — superfluous when logged in */
.masthead .ui-home {
  display: none !important;
}

.masthead .ui-history {
  display: inline-block !important;
}

/* Hide the HedgeDoc pinwheel avatar */
.masthead .dropdown-toggle img,
.masthead .ui-signout img {
  display: none !important;
}

/* Hide the big Sign In button + tagline hero when logged in */
/* Hide the big Sign In button when logged in — JS hides .ui-signin spans */

/* Compact hero when history is visible */
h1.cover-heading img {
  max-width: 180px !important;
}

#home .inner.cover > p.lead {
  margin-bottom: 0.75rem !important;
  font-size: 0.95rem !important;
}

#home,
#home.section {
  padding: 1.5rem 1.5rem 0.5rem !important;
}

/* Masthead inner */
.masthead-nav {
  float: none !important;
  text-align: center !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Nav links (Intro, History) */
.masthead-nav > li {
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
}

.masthead-nav > li > a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #666680 !important;
  text-shadow: none !important;
  padding: 0.75rem 1.5rem !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s, border-color 0.15s !important;
}

.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  color: #1e1e2a !important;
  background: transparent !important;
  border-bottom-color: #1e1e2a !important;
}

.masthead-nav > li.active > a {
  color: #1e1e2a !important;
  border-bottom-color: #1e1e2a !important;
  background: transparent !important;
}

/* Profile dropdown in masthead */
.masthead .dropdown-toggle {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #1e1e2a !important;
  text-shadow: none !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.masthead .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e8e8e5 !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(30,30,42,0.12) !important;
}

.masthead .dropdown-menu > li > a {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #1e1e2a !important;
  text-shadow: none !important;
  padding: 0.625rem 1.25rem !important;
}

.masthead .dropdown-menu > li > a:hover {
  background: #f7f7f6 !important;
  color: #1e1e2a !important;
}

/* "or" text */
span.ui-or {
  display: none !important;
}

/* "Explore all features" button */
a.btn.btn-lg.btn-primary[href*="features"],
a.btn-primary[href*="features"],
.btn-lg.btn-primary {
  display: none !important;
}

/* HedgeDoc screenshot image */
img.screenshot,
img.screenshot.ui-signin {
  display: none !important;
}

/* Feature grid row (Real time collaboration, Charts, Slide mode) */
#home .inner.cover > .lead.row,
#home .lead.row,
.lead.row {
  display: none !important;
}

/* Feature icons inside those divs */
.col-md-4 .fa-bolt,
.col-md-4 .fa-bar-chart,
.col-md-4 .fa-tv,
#home .col-md-4 {
  display: none !important;
}

/* Footer: Powered by HedgeDoc, social links, locale */
.mastfoot,
.mastfoot * {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

select.ui-locale {
  display: none !important;
}

/* Brand name in masthead */
.masthead-brand {
  display: none !important;
}

/* All inner sections need light theme override */
#history,
#history * {
  color: #1e1e2a !important;
  text-shadow: none !important;
  background-color: transparent !important;
}

/* Ensure all .inner divs get the light theme */
.cover-container .inner,
.cover-container .inner * {
  text-shadow: none !important;
}

/* ═══════════════════════════════════════
   HISTORY SECTION (logged-in view)
   ═══════════════════════════════════════ */

/* Show history, override HedgeDoc's inline display:none */
#history {
  display: block !important;
  width: 100% !important;
  max-width: 600px !important;
  text-align: left !important;
  margin: 0 auto !important;
  padding: 0 1.5rem 2rem !important;
}

/* Hide the search/filter toolbar — too cluttered */
#history > form,
#history > form.form-inline {
  display: none !important;
}

/* "No history" message */
#history h4.ui-nohistory {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.875rem !important;
  color: #666680 !important;
  text-shadow: none !important;
}

/* "Below is history from this browser" text */
#history > .ui-signin > p {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.8125rem !important;
  color: #666680 !important;
  text-shadow: none !important;
  letter-spacing: 0.05em !important;
}

/* History list container */
#history-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* History cards */
#history-list .item {
  background: #ffffff !important;
  border: 1px solid #e8e8e5 !important;
  border-radius: 0 !important;
  padding: 1rem 1.25rem !important;
  text-shadow: none !important;
  text-align: left !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
  position: relative !important;
  margin-bottom: 0.5rem !important;
}

#history-list .item:hover {
  box-shadow: 0 2px 12px rgba(30,30,42,0.08) !important;
  border-color: #d0d0cc !important;
}

/* Document title in card */
#history-list .item a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1e1e2a !important;
  text-shadow: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}

#history-list .item a:hover {
  color: #35354a !important;
}

/* Timestamp in card — keep .timestamp hidden (raw epoch), style .time and .fromNow */
#history-list .item small,
#history-list .item .time,
#history-list .item .fromNow {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.7rem !important;
  color: #999 !important;
  text-shadow: none !important;
}

#history-list .item .timestamp {
  display: none !important;
}

/* Hide the raw note ID text that leaks into the card */
#history-list .item .text-muted {
  display: none !important;
}

/* Override the giant headline styles HedgeDoc applies inside cards */
#history-list .item h4,
#history-list .item h3,
#history-list .item h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-shadow: none !important;
  color: #1e1e2a !important;
}

/* Close/remove button on cards */
#history-list .item .close {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  color: #ccc !important;
  text-shadow: none !important;
  opacity: 0 !important;
  transition: opacity 0.15s !important;
  font-size: 1rem !important;
}

#history-list .item:hover .close {
  opacity: 0.6 !important;
}

#history-list .item .close:hover {
  opacity: 1 !important;
  color: #666 !important;
}

/* Pin icon */
#history-list .item .fa-thumb-tack {
  color: #ccc !important;
  font-size: 0.75rem !important;
}

/* Pagination */
#history .pagination {
  text-align: center !important;
  margin: 1.5rem 0 0 !important;
}

#history .pagination li a,
#history .pagination li span {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.8125rem !important;
  color: #1e1e2a !important;
  background: #ffffff !important;
  border: 1px solid #e8e8e5 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  padding: 0.5rem 0.875rem !important;
}

#history .pagination li.active a,
#history .pagination li.active span {
  background: #1e1e2a !important;
  color: #f7f7f6 !important;
  border-color: #1e1e2a !important;
}

/* "New note" button in nav bar */
.ui-signout .btn-primary,
.ui-signout a.btn-primary,
a.btn.btn-sm.btn-primary {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #f7f7f6 !important;
  background-color: #1e1e2a !important;
  background: #1e1e2a !important;
  border: none !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 0.5rem 1.25rem !important;
}

.ui-signout .btn-primary:hover,
a.btn.btn-sm.btn-primary:hover {
  background-color: #35354a !important;
  background: #35354a !important;
}

/* Extra <br> tags creating whitespace */
#home .inner.cover > span.ui-signin > br {
  display: none !important;
}

/* The third span.ui-signin that wraps features button + screenshot */
#home .inner.cover > span.ui-signin:last-of-type {
  display: none !important;
}

/* ═══════════════════════════════════════
   3. LAYOUT the kept elements
   ═══════════════════════════════════════ */

#home,
#home.section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 1.5rem 1.5rem !important;
  background-color: #f7f7f6 !important;
  background: #f7f7f6 !important;
  /* Don't flex:1 — let it shrink when history is showing below */
}

#home .inner.cover,
#home > .inner.cover {
  max-width: 460px !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0 1rem !important;
  color: #1e1e2a !important;
  text-shadow: none !important;
}

.inner {
  text-shadow: none !important;
  color: #1e1e2a !important;
}

/* ═══════════════════════════════════════
   4. LOGO
   ═══════════════════════════════════════ */

h1.cover-heading {
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  text-shadow: none !important;
}

h1.cover-heading img {
  max-width: 280px !important;
  width: 80% !important;
  height: auto !important;
}

/* ═══════════════════════════════════════
   5. TAGLINE
   ═══════════════════════════════════════ */

#home .inner.cover > p.lead,
p.lead {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #666680 !important;
  text-shadow: none !important;
  margin-bottom: 2.5rem !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════
   6. SIGN IN BUTTON (main page)
   ═══════════════════════════════════════ */

.btn-success,
.btn-lg.btn-success,
a.btn-lg.btn-success,
a.btn.btn-lg.btn-success,
a.btn.btn-lg.btn-success.ui-signin,
button.btn.btn-sm.btn-success,
button.btn.btn-sm.btn-success.ui-signin {
  display: inline-block !important;
  padding: 1rem 2.5rem !important;
  min-width: 220px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #f7f7f6 !important;
  background-color: #1e1e2a !important;
  background: #1e1e2a !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
}

.btn-success:hover,
.btn-lg.btn-success:hover,
a.btn-lg.btn-success:hover,
.btn-success:focus,
.btn-lg.btn-success:focus,
a.btn-lg.btn-success:focus,
.btn-success:active,
.btn-lg.btn-success:active {
  background-color: #1e1e2a !important;
  background: #1e1e2a !important;
  color: #f7f7f6 !important;
  text-shadow: none !important;
  -webkit-transform: translateY(-2px) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(30,30,42,0.2) !important;
}

/* ═══════════════════════════════════════
   7. ERROR / ALERT MESSAGES
   ═══════════════════════════════════════ */

.alert {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.8125rem !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  max-width: 380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* ═══════════════════════════════════════
   8. SIGN-IN MODAL
   ═══════════════════════════════════════ */

.signin-modal .modal-content {
  font-family: 'Space Grotesk', sans-serif !important;
  border-radius: 0 !important;
  border: 1px solid #e8e8e5 !important;
  box-shadow: 0 8px 32px rgba(30,30,42,0.12) !important;
  background: #f7f7f6 !important;
  color: #1e1e2a !important;
  text-shadow: none !important;
}

.signin-modal .modal-header {
  border-bottom: 1px solid #e8e8e5 !important;
  background: #f7f7f6 !important;
  padding: 1.25rem 1.5rem !important;
}

.signin-modal .modal-header h4,
.signin-modal .modal-header h4.modal-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #1e1e2a !important;
  text-shadow: none !important;
}

/* Replace "Choose method" with "Sign In" */
.signin-modal .modal-header h4#mySmallModalLabel {
  font-size: 0 !important;
  line-height: 0 !important;
}
.signin-modal .modal-header h4#mySmallModalLabel::after {
  content: 'Sign In' !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
}

/* "Sign in via E-Mail" label */
.signin-modal .modal-body h4 {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #666680 !important;
  text-shadow: none !important;
  margin-bottom: 1.25rem !important;
}

.signin-modal .modal-body {
  padding: 1.5rem !important;
  background: #f7f7f6 !important;
  text-shadow: none !important;
}

/* Form inputs */
.signin-modal .form-control,
.signin-modal input.form-control {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.95rem !important;
  border-radius: 0 !important;
  border: 1px solid #e8e8e5 !important;
  padding: 0.75rem 1rem !important;
  color: #1e1e2a !important;
  background: #ffffff !important;
  box-shadow: none !important;
  -webkit-transition: border-color 0.15s !important;
  transition: border-color 0.15s !important;
  height: auto !important;
  text-shadow: none !important;
}

.signin-modal .form-control:focus {
  border-color: #1e1e2a !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Sign In button inside modal */
.signin-modal .btn-primary,
.signin-modal button.btn.btn-primary {
  background-color: #1e1e2a !important;
  background: #1e1e2a !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 2rem !important;
  letter-spacing: 0.02em !important;
  color: #f7f7f6 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.signin-modal .btn-primary:hover {
  background-color: #35354a !important;
  background: #35354a !important;
}

/* Register button inside modal */
.signin-modal .btn-default,
.signin-modal button.btn.btn-default {
  border-radius: 0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 2rem !important;
  letter-spacing: 0.02em !important;
  border: 2px solid #1e1e2a !important;
  color: #1e1e2a !important;
  background-color: transparent !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.signin-modal .btn-default:hover {
  background-color: #1e1e2a !important;
  background: #1e1e2a !important;
  color: #f7f7f6 !important;
}

/* Modal close button */
.signin-modal .close {
  color: #999 !important;
  text-shadow: none !important;
  opacity: 0.7 !important;
}

/* Modal backdrop */
.modal-backdrop.in {
  opacity: 0.4 !important;
  background-color: #1e1e2a !important;
}

/* Validation messages */
.signin-modal .help-block {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.75rem !important;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════
   9. FOOTER
   ═══════════════════════════════════════ */

.site-wrapper::after {
  content: 'California \00b7  Switzerland   \00b7    \00a9  2025 Cognitive' !important;
  display: block !important;
  padding: 2rem 1.5rem !important;
  border-top: 1px solid #d9d9d4 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.05em !important;
  color: #666680 !important;
  text-align: center !important;
  background-color: #f7f7f6 !important;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════
   10. EDITOR PAGES (preserve functionality)
   ═══════════════════════════════════════ */

.ui-content,
.markdown-body {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
}

code, pre, .CodeMirror {
  font-family: 'IBM Plex Mono', monospace !important;
}

/* ═══════════════════════════════════════
   11. MOBILE
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  #home,
  #home.section {
    padding: 2rem 1.25rem !important;
  }

  h1.cover-heading img {
    max-width: 220px !important;
  }

  .btn-lg.btn-success,
  a.btn-lg.btn-success {
    min-width: 180px !important;
    padding: 0.875rem 2rem !important;
  }

  .site-wrapper::after {
    padding: 1.5rem 1rem !important;
    font-size: 0.75rem !important;
  }
}