@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');
}

/* public/css/style.css */
/* Small custom touches that go beyond default Tailwind utility classes */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

/* ==================================================
   Shared form-field primitives used by custom select
   ================================================== */

.mui-field {
  position: relative;
  display: block;
}

.mui-field-label {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50%);
  padding: 0;
  background: #fff;
  color: rgb(107 114 128);
  font-size: 1rem;
  line-height: 1.5rem;
  transition:
    top 150ms ease,
    transform 150ms ease,
    color 150ms ease,
    padding 150ms ease,
    font-size 150ms ease;
}

/* The campaign draft/edit summary previews are exactly eight lines tall.
   The mask keeps lines 1-5 readable and blends lines 6-8 into the page. */
.editor-list-story-preview {
  height: 12rem;
  max-height: 12rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

.editor-list-story-preview p,
.editor-list-story-preview div {
  margin-top: 0;
  margin-bottom: 0;
}

.editor-list-story-preview ul,
.editor-list-story-preview ol {
  margin-top: 0;
  margin-bottom: 0;
}

.rich-text-content {
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: rgb(23 23 23);
  overflow-wrap: anywhere;
  word-break: normal;
}

.rich-text-content p,
.rich-text-content div {
  margin: 0 0 0.75rem;
}

.rich-text-content p:last-child,
.rich-text-content div:last-child {
  margin-bottom: 0;
}

.rich-text-content strong,
.rich-text-content b {
  font-weight: 700;
}

.rich-text-content a {
  color: #913985;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.rich-text-content a:hover {
  color: #762c6d;
}

.rich-text-content ul,
.rich-text-content ol {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.5rem;
}

.rich-text-content ul {
  list-style-type: disc;
}

.rich-text-content ol {
  list-style-type: decimal;
}

.rich-text-content li {
  padding-left: 0.125rem;
}

.rich-text-content img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0.75rem 0;
  border-radius: 0;
}

.rich-text-content blockquote {
  margin: 0.75rem 0;
  padding-left: 1rem;
  border-left: 3px solid rgb(229 231 235);
  color: rgb(75 85 99);
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}

.google-auth-button {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  overflow: hidden;
}

.google-auth-button > div {
  width: 100% !important;
  max-width: 400px;
}

.google-auth-button iframe {
  max-width: 100%;
}

.mui-icon-button {
  position: relative;

  width: 48px;
  height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: transparent;
  color: #111827;

  cursor: pointer;
  overflow: hidden;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;

  transition: background-color 150ms ease;
}

/* Material Symbols icon */
.mui-icon-button .material-symbols-outlined {
  font-family: "Material Symbols Outlined";

  font-weight: 400;
  font-style: normal;
  line-height: 1;

  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;

  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";

  pointer-events: none;
  user-select: none;
}

/* Hover */
@media (hover: hover) {
  .mui-icon-button:hover {
    background: rgba(0, 0, 0, 0.08);
  }
}

/* Keyboard focus */
.mui-icon-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Pressed state */
.mui-icon-button:active {
  background: rgba(0, 0, 0, 0.12);
}

/* Ripple */
.mui-ripple {
  position: absolute;
  z-index: 1;

  border-radius: 50%;
  background: currentColor;

  opacity: 0.16;
  transform: scale(0);

  pointer-events: none;

  animation: mui-ripple 500ms ease-out forwards;
}

/* Keep the Material Symbols icon above the ripple. */
.mui-icon-button > :not(.mui-ripple) {
  position: relative;
  z-index: 2;
}

@keyframes mui-ripple {
  from {
    transform: scale(0);
    opacity: 0.16;
  }

  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Disabled */
.mui-icon-button:disabled {
  color: rgba(0, 0, 0, 0.26);
  cursor: default;
  pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mui-ripple {
    animation-duration: 1ms;
  }

  .mui-icon-button {
    transition: none;
  }
}



.modal-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.4); }
.modal-panel { position: relative; z-index: 1; width: min(100%, 28rem); max-height: calc(100vh - 2rem); overflow-y: auto; border-radius: 1rem; background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.16); }
.modal-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem 0.75rem; }
.modal-content { padding: 0.75rem 1.5rem 1.5rem; }
.modal-actions { display: flex; gap: 0.75rem; padding: 0 1.5rem 1.5rem; }

.drawer__divider, .section-divider { height: 1px; border: 0; background: #e5e7eb; }
.filter-option { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; cursor: pointer; font-family: "Inter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.filter-option input { width: 1.125rem; height: 1.125rem; accent-color: #84cc16; }
.mobile-menu__links { display: flex; flex-direction: column; }
.mobile-menu__link { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 0; color: #111827; text-decoration: none; font-size: 1rem; line-height: 1.5rem; font-weight: 400; }

/*
 * ==========================================================================
 * Circular Progress
 * ==========================================================================
 *
 * Indeterminate circular progress indicator inspired by Material UI.
 *
 * Animation:
 *   1. The SVG continuously rotates.
 *   2. The circle's dash grows/shrinks while its offset changes.
 *
 * Accessibility:
 *   - role="progressbar" communicates loading state.
 *   - No aria-valuenow/min/max because progress is indeterminate.
 *   - SVG is hidden from assistive technology because the parent provides
 *     the accessible name and progress semantics.
 *   - Reduced-motion preference is respected.
 */

:root {
  --circular-progress-size: 40px;
  --circular-progress-color: #913985;
  --circular-progress-stroke-width: 3.6px;
  --circular-progress-duration: 1.4s;
}


/* --------------------------------------------------------------------------
 * Root
 * -------------------------------------------------------------------------- */

.circular-progress {
  /*
   * Public customization properties.
   *
   * These can be overridden on an individual instance:
   *
   * style="
   *   --circular-progress-size: 24px;
   *   --circular-progress-color: #913985;
   * "
   */

  --circular-progress-size: 40px;
  --circular-progress-color: #913985;
  --circular-progress-stroke-width: 3.6px;
  --circular-progress-duration: 1.4s;

  width: var(--circular-progress-size);
  height: var(--circular-progress-size);

  display: inline-block;

  /*
   * Prevent flex/grid layouts from unexpectedly shrinking the indicator.
   */
  flex: 0 0 auto;

  color: var(--circular-progress-color);

  /*
   * The progress indicator itself doesn't need to receive focus.
   */
  vertical-align: middle;
}

/*
 * Inside a button the indicator takes the button's text color, so it stays
 * visible on every variant (including the brand-500 primary button).
 */
[data-loading] .circular-progress {
  --circular-progress-color: currentColor;
}

.circular-progress--sm {
  --circular-progress-size: 20px;
}

.circular-progress--md {
  --circular-progress-size: 40px;
}

.circular-progress--lg {
  --circular-progress-size: 56px;
}


/* --------------------------------------------------------------------------
 * SVG
 * -------------------------------------------------------------------------- */

.circular-progress__svg {
  display: block;

  width: 100%;
  height: 100%;

  /*
   * Explicit SVG transform configuration improves consistency across
   * browsers when rotating the SVG around its center.
   */
  transform-box: view-box;
  transform-origin: center;

  animation:
    circular-progress-rotate
    var(--circular-progress-duration)
    linear
    infinite;
}


/* --------------------------------------------------------------------------
 * Progress circle
 * -------------------------------------------------------------------------- */

.circular-progress__circle {
  fill: none;

  stroke: currentColor;
  stroke-width: var(--circular-progress-stroke-width);
  stroke-linecap: round;

  /*
   * The SVG geometry is:
   *
   *   viewBox = 44 × 44
   *   radius  = 18
   *
   * Circumference:
   *
   *   2π × 18 ≈ 113.1px
   *
   * The dash values intentionally use a larger virtual dash space,
   * matching the animation technique used by MUI.
   */

  stroke-dasharray: 1px, 200px;
  stroke-dashoffset: 0;

  animation:
    circular-progress-dash
    var(--circular-progress-duration)
    ease-in-out
    infinite;
}


/* --------------------------------------------------------------------------
 * Rotation animation
 * -------------------------------------------------------------------------- */

@keyframes circular-progress-rotate {
  100% {
    transform: rotate(360deg);
  }
}


/* --------------------------------------------------------------------------
 * Dash animation
 * -------------------------------------------------------------------------- */

@keyframes circular-progress-dash {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }

  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}


/* --------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .circular-progress__svg,
  .circular-progress__circle {
    animation: none;
  }
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link {
  font-weight: 600;
  color: #111827;
  text-decoration: none;
}

.link:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 4px;
}

/* NProgress: global request loading indicator */
#nprogress .bar {
  background: #913985;
}

#nprogress .peg {
  box-shadow: 0 0 10px #913985, 0 0 5px #913985;
}


/* Campaign update previews: keep the list compact and fade the final visible lines. */
.campaign-update-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}