/* TheFuture font */
@font-face {
  font-family: 'TheFuture';
  src: url('fonts/thefuture/TheFuture-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TheFuture';
  src: url('fonts/thefuture/TheFuture-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TheFuture';
  src: url('fonts/thefuture/TheFuture-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TheFuture';
  src: url('fonts/thefuture/TheFuture-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'TheFuture';
  src: url('fonts/thefuture/TheFuture-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* General Styles */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.03em;
  font-synthesis: none;
}

/* Apply full-page background */
body:not(.map-page):not(.insights-page):not(.settings-page):not(.notification-preview-page):not(.help-page-body) {
  background: url('https://images.squarespace-cdn.com/content/v1/647cab6bfaed10613f465e9f/dc51250f-9366-4b86-a766-9406ad935a24/aperture-earth-aerial-istock.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  color: white;
  min-height: 100vh;
}

body.notification-preview-page {
  background: #EFF6F7;
  color: #1f2a2e;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
}

body.notification-preview-page main {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 120px 24px 80px;
}

/* Ensure main content takes up space without white gaps */
main {
  flex: 1; /* Fills remaining space */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white; /* Adjust text color if needed */
  padding-top: 80px; /* Adjust this value to match the height of your nav */
}

/* Make navbar blend into background */
nav {
  background-color: #ffffff;
  border-bottom: 1px solid #ddd;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  height: 64px;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
}

.nav-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
  height: 100%;
  padding: 0 clamp(20px, 5vw, 48px);
}


/* Hide mobile elements by default */
.hamburger,
.close-button {
  display: none;
}

body.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

/* Centered Form Container */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.auth-box {
  background: #ffffff;
  color: #000000;
  padding: 56px 48px;
  border-radius: 8px;
  border: 1px solid #DCDCDC;
  text-align: left;
  max-width: 600px;
  width: 100%;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
}

.auth-box h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin-bottom: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #000000;
}

/* Form Inputs */
.auth-box form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.form-field {
  position: relative;
  margin-bottom: 16px;
}

.form-field:last-child {
  margin-bottom: 24px;
}

.password-field {
  margin-bottom: 8px;
}

.auth-box label {
  display: block;
  font-size: 0.72rem;
  margin-bottom: 6px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-box input {
  padding: 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #DCDCDC;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  color: #000000;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.auth-box input:focus {
  border-color: #023546;
  box-shadow: 0 0 0 3px rgba(2, 53, 70, 0.08);
}

.auth-box button {
  background: #023546;
  color: #ffffff;
  border: 1px solid #023546;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  padding: 12px 22px;
  font-size: 1rem;
  border-radius: 6px;
  width: 100%;
  margin-top: 10px;
  transition: all 0.15s ease;
}

.auth-box button:hover {
  background: #034a60;
  border-color: #034a60;
}

/* Password Reset Link */
.auth-box .forgot-password {
  position: absolute;
  right: 0;
  top: 0;
  color: #023546;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  margin-top: 0;
  font-weight: 500;
}

.auth-box .forgot-password:hover {
  color: #034a60;
  text-decoration: underline;
}

/* Not a member text */
.auth-box .signup-text {
  text-align: center;
  margin-top: 24px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 15px;
}

.auth-box .signup-text a {
  color: #023546;
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
}

.auth-box .signup-text a:hover {
  color: #034a60;
  text-decoration: underline;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.nav-logo img {
  height: 48px;
  width: auto;
  display: block;
}

/* Mobile Menu Button Base */
.hamburger,
.close-button {
  display: none;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 6px;
  transition: background-color 0.2s;
  align-items: center;
  justify-content: center;
}

.hamburger:hover,
.close-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.hamburger:focus,
.close-button:focus {
  outline: none;
}

/* Hamburger Icon */
.hamburger-lines {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: #333;
  transition: all 0.3s ease;
}

.hamburger-lines::before,
.hamburger-lines::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #333;
  transition: all 0.3s ease;
}

.hamburger-lines::before {
  top: -6px;
}

.hamburger-lines::after {
  top: 6px;
}

/* Close Icon */
.close-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.close-icon::before,
.close-icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: #6b7280;
  top: 50%;
  left: 0;
  transition: all 0.3s ease;
}

.close-icon::before {
  transform: rotate(45deg);
}

.close-icon::after {
  transform: rotate(-45deg);
}

/* Active States */
.hamburger.active .hamburger-lines {
  background: transparent;
}

.hamburger.active .hamburger-lines::before {
  top: 0;
  transform: rotate(45deg);
}

.hamburger.active .hamburger-lines::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Navigation Links */
.nav-links {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links-mobile {
  display: none;
}

.nav-links-desktop {
  display: flex;
  margin-left: auto;
}

/* Navigation Links - Items */
.nav-links li {
  display: flex;
}

/* Navigation Links - Links */
.nav-links a {
  color: #111827;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 400;
  padding: 4px 12px;
  transition: color 0.15s, background-color 0.15s;
  position: relative;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover {
  color: #023546;
  background-color: rgba(2, 53, 70, 0.07);
}

.nav-links a.active {
  color: #023546;
  border-bottom-color: #023546;
}

/* Auth Links */
.auth-links {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 50;
}

/* Auth Button */
.auth-links .button {
  background: #023546;
  color: #ffffff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #023546;
  font-size: 1.2rem;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.auth-links .button:hover {
  background: #034a60;
  border-color: #034a60;
}

/* User Greeting */
.user-greeting {
  color: #111827;
  font-weight: 400;
  line-height: 1;
}

/* User Menu */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  color: #111827;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 400;
  transition: color 0.15s;
  margin-top: 0;
}

.user-menu-trigger:hover {
  color: #023546;
  background: transparent;
}

.user-menu-caret {
  font-size: 12px;
  line-height: 1;
  color: inherit;
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #DCDCDC;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 8px;
  display: none;
  z-index: 60;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
}

.user-menu-panel.active {
  display: block;
}

.user-menu-panel a,
.user-menu-panel .user-menu-item {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: #111827;
  font-size: 1rem;
  font-weight: 400;
  transition: color 0.15s;
}

/* .user-menu-item ("Report an issue", SCRUM-787) is a <button>, not an
   <a> like its siblings above -- it opens a modal rather than navigating.
   Styled as a distinct orange pill (feedback.css's --feedback-accent,
   the same brand orange the old floating trigger used -- the fallback
   hex covers the unlikely case feedback.css hasn't loaded yet) rather
   than reading identically to the plain links around it, both to call
   out that it behaves differently (opens something, doesn't navigate)
   and to keep some visual continuity with that old trigger now that
   it's a menu row instead of a floating button. Unlike the plain <a>
   rule above, this isn't touched by the mobile @media override further
   down -- same pill everywhere. */
.user-menu-panel .user-menu-item {
  width: 100%;
  text-align: center;
  background: var(--feedback-accent, #e07b39);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin: 4px 0;
  transition: background-color 0.15s;
}

.user-menu-panel a:hover {
  color: #023546;
  background: transparent;
}

.user-menu-panel .user-menu-item:hover {
  background: var(--feedback-accent-hover, #cd6a28);
  color: #fff;
}

.user-menu-divider {
  height: 1px;
  background: #DCDCDC;
  margin: 6px 6px;
}

/* Desktop User Greeting */
@media (min-width: 769px) {
  .user-greeting {
    position: static;
    margin: 0;
    line-height: normal;
  }

}

/* Mobile Navigation */
@media (max-width: 768px) {
  .nav-alert-mobile { display: flex; margin-left: auto; margin-right: 4px; }
  .nav-alert-desktop { display: none; }

  .nav-container {
    padding: 0 16px;
    gap: 8px;
  }

  .hamburger {
    display: flex;
    margin-left: auto;
    margin-right: -8px;
    margin-top: 0;
  }

  /* When bell is present, bell has margin-left: auto — reset hamburger so only bell pushes right */
  .nav-alert-mobile ~ .hamburger {
    margin-left: 0;
  }

  .close-button {
    display: flex;
    position: absolute;
    top: 32px; /* Half of the 64px space to center it */
    right: 16px;
    transform: translateY(-50%); /* Center it perfectly */
    margin: 0;
    padding: 8px;
    transform: translateY(-50%);
  }

  .user-greeting {
    position: static;
    transform: none;
    font-size: 18px;
    z-index: 51;
  }

  .user-menu {
    position: static;
    width: 100%;
    padding: 24px 24px 0;
    /* width + padding must not exceed the panel: content-box sizing made this
       block 48px wider than the screen, so the menu panel scrolled sideways
       and could be swiped into a "narrow" position. */
    box-sizing: border-box;
  }

  .user-menu-trigger {
    width: 100%;
    justify-content: space-between;
    background: #f3f4f6;
    padding: 12px 16px;
    border-radius: 8px;
  }

  .user-menu-panel {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 8px 0 0 16px;
  }

  /* .user-menu-item deliberately excluded -- its own orange pill styling
     (above) applies unchanged here, not this plain-link mobile
     treatment. */
  .user-menu-panel a {
    padding: 10px 14px;
    border-bottom: none;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 4px;
    font-weight: 500;
  }

  .user-menu-divider {
    display: none;
  }

  .auth-links {
    visibility: hidden;
    position: fixed;
    inset: 0;
    width: 100%;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    /* The panel is exactly the viewport; nothing in it may scroll sideways. */
    overflow-x: hidden;
  }

  .auth-links.active {
    visibility: visible;
    transform: translateX(0);
    display: flex;
    flex-direction: column;
  }

  .nav-links-desktop {
    display: none;
  }

  .nav-links-mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 48px;
    gap: 0;
    border-top: 1px solid #e5e7eb;
  }

  .nav-links-mobile li {
    width: 100%;
    border-bottom: 1px solid #e5e7eb;
  }

  .nav-links-mobile a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 0;
  }

  .nav-links-mobile a:hover {
    background-color: transparent;
  }

  /* Mobile Login Button Styles */
  .auth-links .button {
    display: block;
    width: calc(100% - 76px);
    margin: 16px 24px;
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }

  .close-button {
    color: #6b7280;
  }

  .close-button .fas {
    font-size: 20px;
  }

  /* Add overlay when menu is active */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 40;
  }

  body.menu-active::after {
    visibility: visible;
    opacity: 1;
  }

  .auth-links {
    z-index: 50;
  }
}

/* Form Container Styles */
.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 120px auto 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}

input,
select,
button {
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

input:focus,
select:focus,
button:focus {
  outline: none;
  border-color: #023546;
}

button {
  background-color: #023546;
  color: white;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
  margin-top: 10px;
}

button:hover {
  background-color: #034a60;
}

select {
  background-color: #fff;
  appearance: none; /* Remove native dropdown styling */
}

.hidden {
  display: none;
}

/* Spinner for Loading */
#loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #023546;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Login Page Styles */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-box {
  background: #ffffff;
  color: #0f3460;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 400px;
  width: 90%;
  min-height: 480px; /* Ensures the box stays the same height */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensures content stays balanced */
}

/* Header */
.login-header img {
  max-width: 100px;
  margin-bottom: 20px;
}

.login-header h1 {
  font-size: 1.8rem;
  margin: 0 0 10px;
  color: #0f3460;
}

/* Reserve Space for Error Message */
.login-message {
  min-height: 40px; /* Reserves space for errors */
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: red; /* Ensure error messages are clearly visible */
  visibility: hidden; /* Keeps space reserved when there's no error */
}

/* Make error message visible when it exists */
.login-message.has-error {
  visibility: visible;
}

/* Login Button */
.login-button {
  display: inline-block;
  background: #023546;
  color: #ffffff;
  border: 1px solid #023546;
  text-decoration: none;
  padding: 11px 22px;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: all 0.15s ease;
  font-weight: 500;
}

.login-button:hover {
  background: #034a60;
  border-color: #034a60;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .login-box {
    padding: 20px;
    min-height: 450px; /* Adjust for smaller screens */
  }

  .login-header img {
    max-width: 80px;
  }

  .login-header h1 {
    font-size: 1.5rem;
  }

  .login-message {
    font-size: 0.9rem;
  }

  .login-button {
    font-size: 0.9rem;
    padding: 10px 15px;
  }
}

/* Links */
.auth-box a {
  display: block;
  margin-top: 10px;
  color: #023546;
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
}

.auth-box a:hover {
  color: #034a60;
  text-decoration: underline;
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .auth-box {
    width: 90%;
    padding: 30px;
  }
}

/* Password Reset Page Styles */
.password-reset-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.password-reset-box {
  background: #ffffff;
  color: #0f3460;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 400px;
  width: 90%;
  min-height: 400px; /* Reduced height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center form content properly */
}

/* Reduce space below the title */
.password-reset-header {
  margin-bottom: 10px;
}

/* Properly align form elements */
.password-reset-box form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Input Fields */
.password-reset-box label {
  font-weight: bold;
  text-align: left;
  display: block;
  margin-bottom: 5px;
}

.password-reset-box input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

/* Submit Button */
.password-reset-button {
  display: inline-block;
  background: #023546;
  color: #ffffff;
  border: 1px solid #023546;
  text-decoration: none;
  padding: 11px 22px;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: all 0.15s ease;
  font-weight: 500;
  margin-top: 10px;
}

.password-reset-button:hover {
  background: #034a60;
  border-color: #034a60;
}

ul.errorlist {
  color: red; /* Makes the text red */
  list-style-type: none; /* Removes default bullet points */
  padding: 0;
}

ul.errorlist li {
  color: red; /* Ensures all list items inside are red */
  font-weight: bold; /* Optionally make the text bold */
}

/* Form error messages */
.auth-box .errorlist,
.auth-box .error {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #dc2626;
  font-size: 14px;
  margin-top: 8px;
}

.auth-box .errorlist li {
  color: #dc2626;
}

/* Settings Page */
.settings-page {
  background: #EFF6F7;
  color: #1f2a2e;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  margin: 0;
}

/* box-sizing: border-box -- .settings-page is excluded from the general
   `body:not(...)` rule above (which sets margin: 0 for every other page
   variant), so without the margin: 0 just above, this body kept the
   browser's default 8px margin. Combined with this rule's own width: 100%
   under the browser's default content-box sizing, that used to make main
   render its 18-24px side padding ADDED on top of the full-viewport 100%
   width (mobile) instead of included in it -- reported as the settings/
   preferences page needing to scroll horizontally on mobile even though
   nothing on it looks obviously oversized. */
.settings-page main {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 120px 24px 80px;
  width: 100%;
  box-sizing: border-box;
}

.settings-shell {
  width: min(960px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-header {
  color: #1f2a2e;
}

.settings-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 600;
  color: #CD6A28;
  margin: 0 0 8px;
}

.settings-header h1 {
  font-family: 'TheFuture', "Work Sans", sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 12px;
}

.settings-subhead {
  font-size: 16px;
  max-width: 520px;
  margin: 0;
  color: #556366;
}

.settings-card {
  background: #ffffff;
  border: 1px solid #DCDCDC;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(2, 53, 70, 0.08);
  color: #1f2a2e;
}

.settings-alert {
  background: #ffffff;
  border: 1px solid #DCDCDC;
  border-left: 4px solid #023546;
  padding: 12px 16px;
  border-radius: 12px;
  color: #023546;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(2, 53, 70, 0.08);
}

.settings-alert p {
  margin: 0;
}

.settings-section h2 {
  font-family: 'TheFuture', "Work Sans", sans-serif;
  font-size: 20px;
  margin: 0 0 6px;
}

.settings-muted {
  margin: 0 0 18px;
  color: #475569;
  font-size: 14px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #DCDCDC;
}

.settings-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.settings-row-text h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.settings-row-text p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  max-width: 420px;
}

.settings-row-stack {
  flex-direction: column;
  align-items: flex-start;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.settings-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.settings-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #EFF6F7;
  border: 1px solid #DCDCDC;
  border-radius: 999px;
  padding: 6px;
}

.settings-segment label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  color: #1f2a2e;
  cursor: pointer;
}

.settings-segment input {
  accent-color: #CD6A28;
}

.settings-inline-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-input-suffix {
  font-size: 14px;
  color: #475569;
}

.settings-input-prefix {
  font-size: 14px;
  color: #475569;
}

/* Email preview */
.email-preview {
  width: min(720px, 100%);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.email-header h1 {
  font-family: "Space Grotesk", "Work Sans", sans-serif;
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 36px);
  color: #1f2a2e;
}

.email-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 600;
  color: #0a6b57;
  margin: 0 0 12px;
}

.email-subhead {
  color: #556366;
  margin: 0 0 24px;
  font-size: 15px;
}

.email-card {
  background: #f8fafc;
  border-radius: 14px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.email-callout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #1f2937;
  color: #f8fafc;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.email-alert {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
}

.email-alert p {
  margin: 0;
  color: #1f2a2e;
}

.email-alert--critical {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.4);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.12);
}

.email-alert--warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12);
}

.email-alert--good {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.12);
}

.email-alert:last-child {
  margin-bottom: 0;
}

.email-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 24px 0;
}

.email-footer {
  color: #64748b;
  font-size: 13px;
}

.email-footer p {
  margin: 0 0 6px;
}

.email-footer p:last-child {
  margin-bottom: 0;
}

.settings-input {
  width: 100%;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #DCDCDC;
  font-size: 15px;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  background: #ffffff;
  color: #1f2a2e;
  box-sizing: border-box;
}

.settings-input::placeholder {
  color: #94a3b8;
}

/* The global `select { appearance: none }` rule strips the dropdown arrow;
   the organization-defaults crop select wants a normal, obvious dropdown. */
.settings-select {
  appearance: auto;
  -webkit-appearance: menulist;
  padding-right: 32px;
}

.settings-input:disabled {
  cursor: not-allowed;
}

.settings-link-button {
  background: transparent;
  border: none;
  color: #023546;
  font-size: 14px;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  padding: 0;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}

.settings-link-button:hover,
.settings-link-button:focus,
.settings-link-button:active {
  background: transparent;
  color: #034a60;
  text-decoration: underline;
}

.settings-link-button:focus {
  outline: none;
}
.settings-link-button:focus-visible {
  outline: 2px solid rgba(2, 53, 70, .35);
  outline-offset: 2px;
  border-radius: 4px;
}

/* "Add another …" buttons — playful pill + icon micro-interaction */
.settings-link-button[data-action="add-email"],
.settings-link-button[data-action="add-phone"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: transparent;
  transition:
    background .2s ease,
    transform .2s ease,
    gap .2s ease,
    box-shadow .2s ease,
    color .15s ease;
}

.settings-link-button[data-action="add-email"]::before,
.settings-link-button[data-action="add-phone"]::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #023546;
  background: rgba(2, 53, 70, .12);
  transition:
    transform .25s cubic-bezier(.34, 1.56, .64, 1),
    background .2s ease,
    color .15s ease,
    box-shadow .2s ease;
}

.settings-link-button[data-action="add-email"]:hover,
.settings-link-button[data-action="add-phone"]:hover,
.settings-link-button[data-action="add-email"]:focus,
.settings-link-button[data-action="add-phone"]:focus {
  background: rgba(2, 53, 70, .08);
  text-decoration: none;
  gap: 9px;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(2, 53, 70, .25);
}

.settings-link-button[data-action="add-email"]:hover::before,
.settings-link-button[data-action="add-phone"]:hover::before,
.settings-link-button[data-action="add-email"]:focus::before,
.settings-link-button[data-action="add-phone"]:focus::before {
  background: #023546;
  color: #fff;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 2px 6px rgba(2, 53, 70, .35);
}

.settings-link-button[data-action="add-email"]:active,
.settings-link-button[data-action="add-phone"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px -2px rgba(2, 53, 70, .25);
}

.settings-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.settings-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-ui {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #e2e8f0;
  position: relative;
  transition: background 0.2s ease;
}

.toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  transition: transform 0.2s ease;
}

.settings-toggle input:checked + .toggle-ui {
  background: #CD6A28;
}

.settings-toggle input:checked + .toggle-ui::after {
  transform: translateX(22px);
}

.settings-toggle input:disabled + .toggle-ui {
  opacity: 0.65;
  cursor: not-allowed;
}

.settings-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-button {
  border-radius: 10px;
  padding: 12px 18px;
  border: none;
  background: #023546;
  color: #fff;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.settings-note {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

@media (max-width: 768px) {
  .settings-page main {
    padding: 100px 18px 60px;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-toggle {
    align-self: flex-start;
  }

  .settings-card {
    padding: 18px;
  }

  .settings-inline-input {
    flex-wrap: wrap;
    row-gap: 6px;
    width: 100%;
  }

  .settings-page .settings-input {
    max-width: 100%;
    width: 100%;
  }

  .settings-inline-input .settings-input {
    flex: 1;
    min-width: 0;
  }

  .settings-list-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-actions .settings-button {
    width: 100%;
  }

  .settings-segment {
    width: auto;
    align-self: center;
    justify-content: flex-start;
  }
}

/* =========================================================
   Floating help button (visible on every authenticated page)
   ========================================================= */
.help-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0a6b57;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  z-index: 1000;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.help-fab:hover,
.help-fab:focus-visible {
  background: #0d8a70;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  outline: none;
}

.help-fab-icon {
  font-family: "Space Grotesk", "Work Sans", serif;
  font-weight: 600;
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .help-fab {
    width: 44px;
    height: 44px;
    bottom: 16px;
    right: 16px;
  }
  .help-fab-icon {
    font-size: 20px;
  }
}

/* =========================================================
   Help & Glossary page
   ========================================================= */
body.help-page-body {
  background: #EFF6F7;
  color: #1f2a2e;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  min-height: 100vh;
}

body.help-page-body main {
  display: block;
  text-align: left;
  color: #1f2a2e;
  padding: 110px 32px 96px;
  align-items: stretch;
  justify-content: flex-start;
}

.help-page {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---------- Sidebar TOC ---------- */
.help-toc {
  position: sticky;
  top: 104px;
  align-self: start;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.help-toc-inner {
  background: #ffffff;
  border: 1px solid #DCDCDC;
  border-radius: 14px;
  padding: 22px 18px 20px;
  box-shadow: 0 8px 24px rgba(2, 53, 70, 0.08);
}

.help-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}

.help-toc h2 {
  font-family: 'TheFuture', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0, 0, 0, 0.45);
  margin: 0;
}

.help-toc-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.2s ease;
  line-height: 0;
}

.help-toc-toggle:hover {
  background: rgba(2, 53, 70, 0.06);
  color: #023546;
}

.help-toc-toggle.is-open {
  transform: rotate(180deg);
  color: #023546;
}

.help-toc-group {
  font-family: 'TheFuture', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #CD6A28;
  margin: 18px 0 8px;
  padding-left: 8px;
}

.help-toc-group:first-of-type {
  margin-top: 0;
}

.help-toc .help-toc-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-toc .help-toc-nav li + li {
  margin-top: 1px;
}

.help-toc .help-toc-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  color: #2f3a3e;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
  border-left: 2px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.help-toc .help-toc-nav a:hover,
.help-toc .help-toc-nav a:focus-visible {
  background: rgba(205, 106, 40, 0.07);
  color: #CD6A28;
  border-left-color: #CD6A28;
  outline: none;
}

/* ---------- Main content card ---------- */
.help-content {
  background: #ffffff;
  border: 1px solid #DCDCDC;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(2, 53, 70, 0.08);
  overflow: hidden;
}

/* Hero band */
.help-hero {
  position: relative;
  padding: 44px 48px 36px;
  background: linear-gradient(135deg, #7a3a12 0%, #a8521e 45%, #CD6A28 100%);
  color: #ffffff;
  overflow: hidden;
}

.help-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 90% -50%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(400px 240px at -10% 120%, rgba(0, 0, 0, 0.12), transparent 70%);
  pointer-events: none;
}

.help-hero > * {
  position: relative;
  z-index: 1;
}

.help-eyebrow {
  display: inline-block;
  font-family: 'TheFuture', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 14px;
}

.help-hero h1 {
  font-family: 'TheFuture', sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.help-lede {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 14px;
  max-width: 60ch;
}

.help-meta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin: 12px 0 0;
  max-width: 70ch;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  font-style: normal;
}

.help-meta em {
  font-style: normal;
}

/* Content body inside the card */
.help-body {
  padding: 8px 48px 40px;
}

/* TODO chip */
.help-todo {
  display: inline-block;
  background: #fff4d6;
  color: #8a5a08;
  border: 1px solid #f3c969;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
}

p.help-todo {
  display: block;
  padding: 10px 14px;
  margin: 12px 0 0;
  border-radius: 8px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

p.help-todo::before {
  content: "Review needed · ";
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 2px;
}

/* ---------- Page sections ---------- */
.help-section {
  padding: 32px 0 8px;
  border-top: 1px solid #DCDCDC;
  scroll-margin-top: 110px;
}

.help-section:first-of-type {
  border-top: none;
  padding-top: 36px;
}

.help-section h2 {
  font-family: 'TheFuture', sans-serif;
  font-size: 22px;
  font-weight: 600;
  background: linear-gradient(90deg, #a8521e 0%, #CD6A28 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-section h2::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #CD6A28 0%, #a8521e 100%);
  flex-shrink: 0;
  -webkit-text-fill-color: initial;
}

.help-section p,
.help-section li {
  font-size: 15px;
  line-height: 1.65;
  color: #2f3a3e;
}

.help-section p {
  margin: 0 0 12px;
}

.help-section strong {
  color: #1f2a2e;
  font-weight: 600;
}

.help-section ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.help-section li + li {
  margin-top: 6px;
}

.help-section a {
  color: #023546;
  text-decoration: underline;
  text-decoration-color: rgba(2, 53, 70, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.help-section a:hover {
  text-decoration-color: #023546;
  text-decoration-thickness: 2px;
}

/* Glossary-term links: hover for definition, click optional */
.help-section a[href^="#g-"],
.glossary-entry a[href^="#g-"] {
  text-decoration: none;
  border-bottom: 1px dashed rgba(205, 106, 40, 0.6);
  padding-bottom: 0;
  cursor: help;
  color: #a8521e;
  font-weight: 500;
  transition: border-bottom-color 0.15s ease, background 0.15s ease;
}

.help-section a[href^="#g-"]:hover,
.glossary-entry a[href^="#g-"]:hover {
  border-bottom-color: #CD6A28;
  border-bottom-style: solid;
  background: rgba(205, 106, 40, 0.07);
}

/* Tippy tooltip styling overrides for the help page */
.tippy-box[data-theme~='light'] {
  background-color: #ffffff;
  color: #1f2a2e;
  border: 1px solid #DCDCDC;
  box-shadow: 0 8px 24px rgba(2, 53, 70, 0.1);
  border-radius: 10px;
}

.tippy-box[data-theme~='light'] > .tippy-arrow {
  color: #ffffff;
}

.help-tip-title {
  font-family: 'TheFuture', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #CD6A28;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #DCDCDC;
}

.help-tip-body {
  font-size: 13px;
  line-height: 1.55;
  color: #2f3a3e;
}

.help-tip-foot {
  margin-top: 8px;
  padding-top: 6px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
  font-style: italic;
  border-top: 1px dashed #DCDCDC;
}

.help-section code {
  background: rgba(2, 53, 70, 0.06);
  border: 1px solid #DCDCDC;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 13px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  color: #1f2a2e;
}

/* ---------- Glossary ---------- */
.help-glossary {
  padding-top: 36px;
}

.help-glossary > h2 {
  margin-bottom: 18px;
}

.glossary-entry {
  padding: 18px 20px;
  margin-top: 10px;
  background: #EFF6F7;
  border: 1px solid #DCDCDC;
  border-radius: 12px;
  scroll-margin-top: 110px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.glossary-entry:target {
  border-color: #CD6A28;
  box-shadow: 0 0 0 3px rgba(205, 106, 40, 0.14);
}

.glossary-entry h3 {
  font-family: 'TheFuture', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1f2a2e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.glossary-entry h3::before {
  content: "§";
  color: #CD6A28;
  font-weight: 500;
  font-size: 15px;
}

.glossary-entry p {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 8px;
  color: #2f3a3e;
}

.glossary-entry p:last-child {
  margin-bottom: 0;
}

.glossary-feature {
  background: linear-gradient(135deg, rgba(205, 106, 40, 0.07) 0%, rgba(255, 248, 238, 0.9) 100%);
  border: 1px solid rgba(205, 106, 40, 0.35);
  padding: 22px 24px;
  box-shadow: 0 8px 24px rgba(205, 106, 40, 0.10);
}

.glossary-feature h3 {
  font-size: 18px;
  color: #1f2a2e;
}

.glossary-feature h3::before {
  content: "★";
  color: #CD6A28;
  font-size: 14px;
}

/* ---------- Footer ---------- */
.help-footer {
  margin-top: 32px;
  padding: 20px 0 4px;
  border-top: 1px solid #DCDCDC;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.help-footer a {
  color: #023546;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .help-page {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .help-toc {
    position: static;
    max-height: none;
  }

  .help-toc-inner {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  .help-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1.5px solid #023546;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(2, 53, 70, 0.10);
    margin: 0;
  }

  .help-toc-header:active {
    background: rgba(2, 53, 70, 0.04);
  }

  .help-toc h2 {
    color: rgba(0, 0, 0, 0.45);
    font-size: 13px;
  }

  .help-toc-toggle {
    display: flex;
  }

  .help-toc-nav {
    display: none;
    margin-top: 6px;
    background: #ffffff;
    border: 1px solid #DCDCDC;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 4px 12px rgba(2, 53, 70, 0.06);
  }

  .help-toc-nav.is-open {
    display: block;
  }

  .help-hero {
    padding: 32px 26px 28px;
  }

  .help-hero h1 {
    font-size: 28px;
  }

  .help-body {
    padding: 4px 26px 32px;
  }

  body.help-page-body main {
    padding: 96px 16px 64px;
  }
}

@media (max-width: 640px) {
  body.help-page-body main {
    padding: 80px 10px 48px;
  }

  .help-hero {
    padding: 24px 18px 22px;
  }

  .help-hero h1 {
    font-size: 22px;
  }

  .help-lede {
    font-size: 14px;
  }

  .help-body {
    padding: 4px 18px 24px;
  }

  .help-section h2 {
    font-size: 18px;
  }

  .help-section p,
  .help-section li {
    font-size: 14px;
  }

  .glossary-entry {
    padding: 14px 14px;
  }

  .glossary-feature {
    padding: 16px 16px;
  }

  .help-section {
    scroll-margin-top: 80px;
  }

  .glossary-entry {
    scroll-margin-top: 80px;
  }
}

/* ── Help icon (nav) ─────────────────────────────────────────────── */
.nav-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0a6b57;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.nav-help:hover,
.nav-help:focus-visible {
  background: #0d8a70;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(10, 107, 87, 0.35);
  outline: none;
}

.nav-help.active {
  background: #0d8a70;
  box-shadow: 0 0 0 2px rgba(10, 107, 87, 0.25);
}

.nav-help-icon {
  font-family: "Space Grotesk", "Work Sans", serif;
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
}

/* ── Onboarding alert bell (nav) ─────────────────────────────────── */
.nav-alert {
  position: relative;
  display: flex;
  align-items: center;
}

/* Nav-bar bell: hidden on desktop, shown on mobile in fixed nav bar */
.nav-alert-mobile { display: none; }

.nav-alert-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  position: relative;
  color: #111827;
  transition: color 0.15s;
  margin-top: 0;
}

.nav-alert-trigger:hover {
  background: transparent;
  color: #023546;
}

.nav-alert-bell {
  display: block;
}

.nav-alert-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #d97706;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.nav-alert-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d97706;
}

.nav-alert-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: #fff;
  border: 1px solid #DCDCDC;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 14px 16px;
  z-index: 1100;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
}

.nav-alert-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #DCDCDC;
  border-top: 1px solid #DCDCDC;
  transform: rotate(45deg);
}

.nav-alert-panel.active {
  display: block;
}

.nav-alert-message {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 12px;
  line-height: 1.6;
}

.nav-alert-action {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #023546;
  text-decoration: none;
  border: 1px solid #023546;
  border-radius: 6px;
  padding: 6px 12px;
  transition: background 0.15s, color 0.15s;
}

.nav-alert-action:hover {
  background: #023546;
  color: #ffffff;
}

/* On mobile: nav-bar bell visible; in-menu bell shows message inline */
@media (max-width: 768px) {
  /* Show the fixed-nav bell, grouped with the hamburger on the right */
  .nav-alert-mobile { display: flex; margin-left: auto; margin-right: 4px; }

  /* In-menu bell: full-width row with inline message, no popup */
  .auth-links .nav-alert {
    width: 100%;
    border-bottom: 1px solid #e5e7eb;
    flex-direction: column;
    align-items: flex-start;
  }
  .auth-links .nav-alert-trigger {
    padding: 20px 24px 8px 24px;
    font-size: 16px;
    gap: 10px;
    color: #374151;
    cursor: default;
    pointer-events: none;
    align-self: flex-start;
  }
  .auth-links .nav-alert-badge {
    top: 14px;
    right: 17px;
  }
  .auth-links .nav-alert-dot {
    top: 16px;
    right: 18px;
  }
  .auth-links .nav-alert-panel,
  .auth-links .nav-alert-panel.active {
    position: static !important;
    display: block !important;
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 24px 20px;
  }
  .auth-links .nav-alert-panel::before { display: none; }
}