/* FlatPack Application Stylesheet */
@import "flat_pack/variables.css";
@import "flat_pack/rich_text.css";
@import "flat_pack/content_editor.css";

/* Base layer for component styles */
@layer components {
  /* FlatPack components use Tailwind utilities and CSS variables */
  /* All styling is done via Tailwind classes in component templates */

  .fp-hit-target {
    min-width: var(--hit-target-min);
    min-height: var(--hit-target-min);
    touch-action: manipulation;
  }

  .fp-hit-target-inline {
    min-width: var(--hit-target-inline-min);
    min-height: var(--hit-target-inline-min);
    touch-action: manipulation;
  }

  /* Compact control that stays icon-sized. The pseudo expands the hit to --hit-target-min. */
  .fp-hit-slop {
    position: relative;
    background-color: transparent;
    touch-action: manipulation;
  }

  .fp-hit-slop::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--hit-target-min);
    height: var(--hit-target-min);
    transform: translate(-50%, -50%);
  }

  .fp-touch-manipulation {
    touch-action: manipulation;
  }

  /* Keep overlay scroll from chaining into the page underneath. */
  [data-controller~="flat-pack--modal"],
  [data-controller~="flat-pack--drawer"],
  [data-controller~="flat-pack--command-palette"],
  [data-flat-pack--carousel-target="lightbox"],
  .flat-pack-modal__body,
  .fp-drawer-body {
    overscroll-behavior: contain;
  }

  /* Tailwind: .fp-skip-link */
  .fp-skip-link {
    position: fixed;
    z-index: 100;
    top: 1rem;
    left: 1rem;
    transform: translateY(-150%);
  }

  .fp-skip-link:focus-visible {
    transform: none;
  }

  /* Overlay inset padding: existing 1rem / 1.5rem pad, never less than the notch. */
  .fp-overlay-pad {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
  }

  @media (min-width: 640px) {
    .fp-overlay-pad {
      padding-top: max(1.5rem, env(safe-area-inset-top, 0px));
      padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
      padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
      padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
    }
  }

  .fp-toast-region {
    top: calc(var(--top-nav-height) + env(safe-area-inset-top, 0px) + calc(var(--spacing) * 4));
    right: calc(env(safe-area-inset-right, 0px) + calc(var(--spacing) * 4));
  }

  .fp-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Mobile drawer only. Desktop sidebar sits in the grid, not under the notch. */
  @media (max-width: 767px) {
    .fp-sidebar-drawer {
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .fp-sidebar-drawer[data-mobile-drawer-side="left"] {
      padding-left: env(safe-area-inset-left, 0px);
    }

    .fp-sidebar-drawer[data-mobile-drawer-side="right"] {
      padding-right: env(safe-area-inset-right, 0px);
    }
  }

  .fp-tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  .fp-progress-fill {
    background-color: var(--progress-fill-color);
  }

  .fp-progress-fill--success {
    background-color: var(--progress-success-fill-color);
  }

  .fp-progress-fill--warning {
    background-color: var(--progress-warning-fill-color);
  }

  .fp-progress-fill--danger {
    background-color: var(--progress-danger-fill-color);
  }

  .fp-stepper-marker {
    border-color: var(--stepper-upcoming-color);
    background-color: var(--surface-background-color);
    color: var(--stepper-muted-color);
  }

  li[data-status="complete"] > .fp-stepper-marker {
    border-color: var(--stepper-complete-color);
    background-color: var(--stepper-complete-color);
    color: var(--stepper-complete-text-color);
  }

  li[data-status="current"] > .fp-stepper-marker {
    border-color: var(--stepper-current-color);
    background-color: var(--stepper-current-color);
    color: var(--color-primary-text);
  }

  .fp-text-balance {
    text-wrap: balance;
  }

  .fp-text-pretty {
    text-wrap: pretty;
  }

  /* Empty state and the content that replaces it fade in on --duration-slow.
   * Hosts add .fp-content-enter to the panel that takes the empty state's place.
   */
  .fp-empty-state,
  .fp-content-enter {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--duration-slow) var(--easing-enter),
      transform var(--duration-slow) var(--easing-enter);

    @starting-style {
      opacity: 0;
      transform: translateY(4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fp-empty-state,
    .fp-content-enter {
      transition: none;
      transform: none;
      opacity: 1;

      @starting-style {
        opacity: 1;
        transform: none;
      }
    }

    .fp-skip-link {
      transform: none;
      clip: rect(0, 0, 0, 0);
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .fp-skip-link:focus-visible {
      clip: auto;
      width: auto;
      height: auto;
      overflow: visible;
    }
  }

  .shadow-button {
    box-shadow: var(--button-shadow);
  }

  .shadow-button:hover,
  .shadow-button:focus {
    box-shadow: var(--button-shadow-hover);
  }

  .shadow-button:active {
    box-shadow: var(--button-shadow-active);
  }

  .shadow-button:disabled {
    box-shadow: none;
  }

  .fp-card-hover-subtle {
    transition: background-color var(--transition-fast);
    cursor: pointer;
  }

  .fp-card-hover-subtle:hover {
    background-color: var(--card-hover-subtle-background-color);
  }

  .fp-card-hover-strong {
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
  }

  .fp-card-hover-strong:hover {
    box-shadow: var(--card-hover-strong-shadow);
    border-color: var(--card-hover-strong-border-color);
  }

  .fp-scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .fp-scrollbar-hidden::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Soft trailing fade when OverflowRow can scroll further right. */
  [data-controller~="flat-pack--overflow-row"][data-can-scroll-end="true"] .fp-overflow-row-scroller {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(100% - var(--overflow-row-fade-size)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(100% - var(--overflow-row-fade-size)),
      transparent 100%
    );
  }

  [data-controller~="flat-pack--chart"] .apexcharts-xaxis-label,
  [data-controller~="flat-pack--chart"] .apexcharts-yaxis-label,
  [data-controller~="flat-pack--chart"] .apexcharts-datalabel,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text-y-value {
    font-variant-numeric: tabular-nums;
  }

  /* Outline icons follow --icon-stroke-width (Heroicons 1.5). Solid/mini/micro
   * drop the stroke attribute in icon_controller, so this does not thicken fills.
   */
  svg[data-controller~="flat-pack--icon"][stroke] {
    stroke-width: var(--icon-stroke-width, 1.5);
  }

  /* Mirror travel/alignment glyphs in RTL. Uses the CSS scale property so
   * optical translate nudges on transform still apply. Do not flip vertical
   * chevrons, checks, or chat-bubble tails (those stay via IconComponent).
   */
  [dir="rtl"] .fp-icon-directional {
    scale: -1 1;
  }

  /* Danger dot overlay for SVG icons. */
  svg.fp-red-dot {
    overflow: visible;
  }

  svg.fp-red-dot .fp-red-dot-indicator {
    fill: var(--color-danger-background-color);
    stroke: var(--surface-background-color);
    stroke-width: 1;
    pointer-events: none;
    position: relative;
    z-index: 999999999;
  }

  .apexcharts-tooltip.apexcharts-theme-light,
  .apexcharts-xaxistooltip.apexcharts-theme-light,
  .apexcharts-yaxistooltip.apexcharts-theme-light {
    background: var(--surface-page-background-color) !important;
    border-color: var(--surface-border-color) !important;
    color: var(--surface-content-color) !important;
  }

  .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--surface-page-background-color) !important;
    border-bottom-color: var(--surface-border-color) !important;
    color: var(--surface-content-color) !important;
  }

  [data-controller~="flat-pack--chart"] .apexcharts-tooltip,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip.apexcharts-theme-light,
  [data-controller~="flat-pack--chart"] .apexcharts-xaxistooltip,
  [data-controller~="flat-pack--chart"] .apexcharts-xaxistooltip.apexcharts-theme-light,
  [data-controller~="flat-pack--chart"] .apexcharts-yaxistooltip,
  [data-controller~="flat-pack--chart"] .apexcharts-yaxistooltip.apexcharts-theme-light {
    background: var(--surface-page-background-color) !important;
    color: var(--surface-content-color) !important;
    border-color: var(--surface-border-color) !important;
  }

  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-title,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--surface-page-background-color) !important;
    border-bottom-color: var(--surface-border-color) !important;
    color: var(--surface-content-color) !important;
  }

  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text-y-label,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text-y-value,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text-z-label,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text-z-value,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text-goals-label,
  [data-controller~="flat-pack--chart"] .apexcharts-tooltip-text-goals-value {
    color: var(--surface-content-color) !important;
  }

  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip,
  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--tooltip-background-color, var(--surface-background-color)) !important;
    color: var(--tooltip-text-color, var(--surface-content-color)) !important;
  }

  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip-title,
  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip-series-group,
  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip-text,
  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip-y-group,
  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip-text-y-label,
  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip-text-y-value {
    color: var(--tooltip-text-color, var(--surface-content-color)) !important;
  }

  [data-flat-pack--chart-type-value="donut"] .apexcharts-tooltip-title {
    background: var(--tooltip-background-color, var(--surface-background-color)) !important;
  }

  /* Sidebar layout: width driven by CSS via data attribute set before first paint.
   * The inline FOUC-prevention script sets data-flat-pack-sidebar-collapsed on
   * the sidebar wrapper before <aside> is parsed. JS then toggles this attribute
   * for user interactions, letting CSS transitions handle the animation.
   * !important overrides Tailwind's w-64 / md:w-auto utilities.
   */
  @media (min-width: 768px) {
    [data-flat-pack-sidebar-collapsed="true"] {
      width: 4rem !important;
    }

    [data-flat-pack-sidebar-collapsed="true"] > aside {
      width: 4rem !important;
    }

    [data-flat-pack-sidebar-collapsed="false"] {
      width: 16rem !important;
    }

    [data-flat-pack-sidebar-collapsed="false"] > aside {
      width: 16rem !important;
    }

    .fp-sidebar-label {
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      opacity: 1;
      max-width: 20rem;
      transition:
        opacity var(--duration-fast) var(--easing-standard),
        max-width var(--duration-slow) var(--easing-standard),
        flex-grow var(--duration-slow) var(--easing-standard);
    }

    [data-flat-pack-sidebar-collapsed="true"] .fp-sidebar-label {
      opacity: 0 !important;
      max-width: 0 !important;
      flex-grow: 0 !important;
    }

    /* Section titles fade, but their block stays in flow so row height does not jump. */
    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack-sidebar-section-title="true"] .fp-sidebar-label {
      max-width: 20rem !important;
      flex-grow: 1 !important;
    }

    [data-flat-pack-sidebar-item="true"],
    [data-flat-pack-sidebar-section-title="true"] {
      transition-property: padding-left, padding-right, gap !important;
      transition-duration: var(--duration-slow) !important;
      transition-timing-function: var(--easing-standard) !important;
    }

    /* !important beats Tailwind px-4 / gap-3, which live in the utilities layer. */
    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack-sidebar-item="true"],
    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack-sidebar-section-title="true"] {
      padding-left: 0.25rem !important;
      padding-right: 0.25rem !important;
      gap: 0 !important;
      overflow-x: clip;
    }

    /*
      Center the icon in the collapsed row with a length, not a percentage.
      A percentage margin on a flex item is cyclic and computes to 0, so the
      active pill stayed heavier on the left. Centering the whole row pulls the
      icon sideways while the label is still wide. 4rem rail, 1px side border,
      mx-2, 1.25rem icon, 0.25rem padding.
    */
    [data-flat-pack-sidebar-item="true"] > [data-flat-pack-sidebar-item-icon="true"],
    [data-flat-pack-sidebar-item="true"] > span.flex-shrink-0:first-child {
      margin-left: 0;
      transition: margin-left var(--duration-slow) var(--easing-standard);
    }

    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack-sidebar-item="true"] > [data-flat-pack-sidebar-item-icon="true"],
    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack-sidebar-item="true"] > span.flex-shrink-0:first-child {
      margin-left: calc((4rem - 1px - (var(--spacing) * 4) - 1.25rem) / 2 - 0.25rem) !important;
    }

    [data-flat-pack--sidebar-group-target="chevron"] {
      max-width: 1.25rem;
      overflow: hidden;
      transition:
        opacity var(--duration-fast) var(--easing-standard),
        transform var(--duration-slow) var(--easing-standard),
        max-width var(--duration-slow) var(--easing-standard);
    }

    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack--sidebar-group-target="chevron"] {
      opacity: 0;
      max-width: 0;
      pointer-events: none;
    }

    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack-sidebar-item="true"] > span:not(.fp-sidebar-label):not([data-flat-pack-sidebar-item-icon="true"]):not(.flex-shrink-0) {
      max-width: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border-width: 0;
      opacity: 0;
    }

    /* !important beats the group's pl-[var(--sidebar-group-item-indent)] utility, so nested rows are the same width as top-level rows and the shared icon margin stays centered. */
    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack--sidebar-group-target="panel"] {
      padding-left: 0 !important;
      transition: padding-left var(--duration-slow) var(--easing-standard);
    }

    [data-flat-pack--sidebar-layout-target="footer"] {
      transition: opacity var(--duration-fast) var(--easing-standard);
    }

    [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack--sidebar-layout-target="footer"] {
      opacity: 0;
      pointer-events: none;
    }

    [data-flat-pack-sidebar-collapsed="false"] [data-flat-pack--sidebar-layout-target="footer"] {
      opacity: 1;
    }
  }

  [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack--sidebar-layout-target="scrollContainer"] {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  [data-flat-pack-sidebar-collapsed="true"] [data-flat-pack--sidebar-layout-target="scrollContainer"]::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  [data-flat-pack-sidebar-collapsed="true"] .flex-1.min-h-0.overflow-y-auto.overscroll-y-contain::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  @media (prefers-color-scheme: dark) {
    .fp-card-hover-strong:hover {
      box-shadow: var(--card-hover-strong-shadow-dark);
    }
  }

}

/* Unlayered so host Tailwind preflight cannot zero the side inset.
 * Flatpack CSS is linked first, which creates @layer components before the
 * host sheet orders @layer base after it. Preflight's * { padding: 0 } then
 * beats any padding still inside @layer components.
 */
.fp-top-nav {
  box-sizing: border-box;
  height: calc(var(--top-nav-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  padding-bottom: 0;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition-property: backdrop-filter, -webkit-backdrop-filter;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--easing-standard);
}

.fp-top-nav[data-scrolled="true"] {
  -webkit-backdrop-filter: blur(var(--top-nav-backdrop-blur));
  backdrop-filter: blur(var(--top-nav-backdrop-blur));
}

@media (prefers-reduced-transparency: reduce) {
  .fp-top-nav,
  .fp-top-nav[data-scrolled="true"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Long-form reading type. Unlayered so Tailwind preflight cannot collapse
 * headings to inherit. Bare CMS HTML (h1, p, ul) picks up the same scale as
 * the main Content demo: kicker, display title, lead, then body at 18px / 1.75
 * with 2rem stack and 2.5rem after the lead.
 */
.fp-content {
  color: var(--surface-muted-content-color);
  line-height: 1.75;
}

.fp-content :where(h1, h2, h3, h4, h5, h6) {
  color: var(--surface-content-color);
  letter-spacing: -0.025em;
  line-height: var(--leading-tight, 1.25);
  text-wrap: pretty;
}

.fp-content h1 {
  font-size: var(--content-h1-size, var(--text-5xl, 3rem));
  font-weight: 600;
  margin-top: 0.5rem;
}

.fp-content h2 {
  font-size: var(--content-h2-size, var(--text-3xl, 1.875rem));
  font-weight: 700;
  margin-top: 2rem;
}

.fp-content h3 {
  font-size: var(--content-h3-size, var(--text-2xl, 1.5rem));
  font-weight: 700;
  margin-top: 2rem;
}

.fp-content h4 {
  font-size: var(--content-h4-size, var(--text-xl, 1.25rem));
  font-weight: 700;
  margin-top: 2rem;
}

.fp-content h5,
.fp-content h6 {
  font-size: var(--content-h5-size, var(--text-lg, 1.125rem));
  font-weight: 700;
  margin-top: 2rem;
}

.fp-content h6 {
  font-size: var(--content-h6-size, var(--text-lg, 1.125rem));
}

.fp-content p,
.fp-content li {
  text-wrap: pretty;
}

.fp-content p {
  font-size: var(--content-p-size, var(--text-lg, 1.125rem));
  line-height: 1.75;
  margin-top: 2rem;
}

.fp-content > p:first-child:has(+ :is(h1, h2, h3)),
.fp-content .fp-content-kicker {
  color: var(--color-primary);
  font-size: var(--content-kicker-size, var(--text-lg, 1.125rem));
  font-weight: 600;
  line-height: 1.75;
  margin-top: 0;
}

.fp-content h1 + p,
.fp-content .fp-content-lead {
  font-size: var(--content-lead-size, var(--text-2xl, 1.5rem));
  line-height: 2;
  margin-top: 1.5rem;
}

.fp-content h1 + p + :is(p, ul, ol, blockquote) {
  margin-top: 2.5rem;
}

.fp-content :where(h2, h3, h4, h5, h6) + p {
  margin-top: 1rem;
}

.fp-content > :first-child {
  margin-top: 0;
}

.fp-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.fp-content strong {
  color: var(--surface-content-color);
  font-weight: 600;
}

.fp-content ul[role="list"] {
  list-style: none;
  margin-top: 2rem;
  padding-left: 0;
}

.fp-content ul:not([role="list"]) {
  list-style-type: disc;
  margin-top: 2rem;
  padding-left: 1.35em;
}

.fp-content ol:not([role="list"]) {
  list-style-type: decimal;
  margin-top: 2rem;
  padding-left: 1.35em;
}

.fp-content li + li {
  margin-top: 0.75rem;
}

.fp-content blockquote {
  border-left: var(--quote-border-width) solid var(--quote-border-color);
  color: var(--quote-text-color);
  font-style: italic;
  margin-top: 2rem;
  padding-left: var(--quote-padding-left);
}

.fp-content hr {
  border: 0;
  border-top: 1px solid var(--surface-border-color);
  margin: 2rem 0;
}

.fp-content code {
  background-color: var(--surface-muted-background-color);
  border: 1px solid var(--surface-border-color);
  border-radius: var(--radius-sm, 0.75rem);
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
}

.fp-content pre {
  background-color: var(--surface-muted-background-color);
  border: 1px solid var(--surface-border-color);
  border-radius: var(--radius-md, 1rem);
  font-size: var(--text-sm, 0.875rem);
  margin-top: 2rem;
  overflow-x: auto;
  padding: 0.875rem 1rem;
}

.fp-content pre code {
  background: none;
  border: 0;
  padding: 0;
}

.fp-content img {
  border-radius: var(--radius-md, 1rem);
  display: block;
  height: auto;
  margin-top: 2rem;
  max-width: 100%;
}

/* Unlayered so appearance:none beats the UA range chrome. Pseudo-elements for
 * WebKit and Firefox cannot share a rule: the whole block is dropped if one
 * engine does not understand the other selector.
 */
.fp-range-input {
  --range-progress: 0%;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: var(--hit-target-min);
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.fp-range-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fp-range-input:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.fp-range-input:hover:not(:disabled) {
  --range-thumb-shadow: var(--shadow-lg);
}

.fp-range-input::-webkit-slider-runnable-track {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--range-track-height);
  border: 0;
  border-radius: 9999px;
  background-color: var(--range-track-color);
  background-image: linear-gradient(var(--range-fill-color), var(--range-fill-color));
  background-repeat: no-repeat;
  background-size: var(--range-progress) 100%;
  background-position: left center;
}

[dir="rtl"] .fp-range-input::-webkit-slider-runnable-track {
  background-position: right center;
}

.fp-range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
  border: 2px solid var(--range-thumb-border-color);
  border-radius: 9999px;
  background: var(--range-thumb-color);
  box-shadow: var(--range-thumb-shadow);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.fp-range-input:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

.fp-range-input::-moz-range-track {
  height: var(--range-track-height);
  border: 0;
  border-radius: 9999px;
  background: var(--range-track-color);
}

.fp-range-input::-moz-range-progress {
  height: var(--range-track-height);
  border: 0;
  border-radius: 9999px;
  background: var(--range-fill-color);
}

.fp-range-input::-moz-range-thumb {
  appearance: none;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: 2px solid var(--range-thumb-border-color);
  border-radius: 9999px;
  background: var(--range-thumb-color);
  box-shadow: var(--range-thumb-shadow);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.fp-range-input:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .fp-range-input::-webkit-slider-thumb {
    transition: none;
  }

  .fp-range-input::-moz-range-thumb {
    transition: none;
  }
}

ol.flat-pack-list {
  counter-reset: flat-pack-list-item;
  list-style: none;
}

/* List rows use parent gap for spacing — no margin-bottom on items. */
.flat-pack-list > li[role="listitem"] {
  margin-bottom: 0;
  margin-block-end: 0;
}

/* Pointer reorder: free-float drag, soft lift. */
.flat-pack-list--orderable > li[role="listitem"] {
  position: relative;
  cursor: grab;
}

.flat-pack-list--orderable.is-reordering {
  user-select: none;
}

.flat-pack-list--orderable.is-reordering > li[role="listitem"].is-dragging {
  cursor: grabbing;
  touch-action: none;
  background-color: var(--surface-background-color);
  box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.18), 0 4px 10px -6px rgb(0 0 0 / 0.1);
  transition: box-shadow var(--duration-fast) var(--easing-standard);
}

.flat-pack-list.flat-pack-list-divided.is-reordering > li[role="listitem"].is-dragging::before {
  display: none;
}

.flat-pack-list-reorder-placeholder {
  display: list-item;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .flat-pack-list--orderable > li[role="listitem"].is-dragging {
    transition: none;
  }
}

/* Row radius must not bend the separator. A 1px rule stays square on every theme. */
.flat-pack-list.flat-pack-list-divided > li + li {
  position: relative;
}

.flat-pack-list.flat-pack-list-divided > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--surface-border-color);
  border-radius: 0;
  pointer-events: none;
}

ol.flat-pack-list > li {
  counter-increment: flat-pack-list-item;
}

.flat-pack-list-item-marker {
  display: none;
}

ol.flat-pack-list > li > .flat-pack-list-item-marker,
ol.flat-pack-list > li > a.flat-pack-list-item-link > .flat-pack-list-item-marker {
  display: inline-flex;
  flex-shrink: 0;
  min-width: var(--list-marker-min-width);
  margin-inline-end: var(--list-marker-gap);
  color: var(--list-marker-color);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

ol.flat-pack-list > li > .flat-pack-list-item-marker::before,
ol.flat-pack-list > li > a.flat-pack-list-item-link > .flat-pack-list-item-marker::before {
  content: counter(flat-pack-list-item) ".";
}

.flat-pack-list-item-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--surface-content-color);
}

.flat-pack-list-item-icon svg {
  display: block;
  flex-shrink: 0;
}

ol.flat-pack-list > li > .flat-pack-list-item-icon,
ol.flat-pack-list > li > a.flat-pack-list-item-link > .flat-pack-list-item-icon {
  display: inline-flex;
}

@keyframes fp-skeleton-shimmer {
  to {
    transform: translateX(180%);
  }
}

.fp-spinner {
  animation: fp-spinner-spin 1s linear infinite;
}

@keyframes fp-spinner-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes fp-spinner-pulse {
  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-spinner {
    animation: fp-spinner-pulse 1.2s var(--easing-standard) infinite;
  }
}

.fp-password-toggle-icons {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
}

.fp-password-toggle-icons svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.fp-password-toggle-icons [data-flat-pack--password-input-target="eyeOffIcon"] {
  opacity: 0;
}

.fp-password-toggle[aria-pressed="true"] [data-flat-pack--password-input-target="eyeIcon"] {
  opacity: 0;
}

.fp-password-toggle[aria-pressed="true"] [data-flat-pack--password-input-target="eyeOffIcon"] {
  opacity: 1;
}

.fp-hero-overlay {
  box-sizing: border-box;
  min-height: var(--hero-overlay-min-height);
  padding-top: var(--hero-overlay-copy-padding-top);
  --button-primary-background-color: var(--hero-overlay-button-primary-background-color);
  --button-primary-hover-background-color: var(--hero-overlay-button-primary-hover-background-color);
  --button-primary-text-color: var(--hero-overlay-button-primary-text-color);
  --button-primary-border-color: var(--hero-overlay-button-primary-border-color);
  --button-secondary-background-color: var(--hero-overlay-button-secondary-background-color);
  --button-secondary-hover-background-color: var(--hero-overlay-button-secondary-hover-background-color);
  --button-secondary-text-color: var(--hero-overlay-button-secondary-text-color);
  --button-secondary-border-color: var(--hero-overlay-button-secondary-border-color);
  --button-default-background-color: var(--hero-overlay-button-primary-background-color);
  --button-default-hover-background-color: var(--hero-overlay-button-primary-hover-background-color);
  --button-default-text-color: var(--hero-overlay-button-primary-text-color);
  --button-default-border-color: var(--hero-overlay-button-primary-border-color);
  --button-focus-ring-offset-color: transparent;
}

.fp-hero-overlay-on-light {
  --hero-overlay-background-color: var(--hero-overlay-on-light-background-color);
  --hero-overlay-left-background: var(--hero-overlay-on-light-left-background);
  --hero-overlay-text-color: var(--hero-overlay-on-light-text-color);
  --hero-overlay-muted-text-color: var(--hero-overlay-on-light-muted-text-color);
  --hero-overlay-button-primary-background-color: var(--hero-overlay-on-light-button-primary-background-color);
  --hero-overlay-button-primary-hover-background-color: var(--hero-overlay-on-light-button-primary-hover-background-color);
  --hero-overlay-button-primary-text-color: var(--hero-overlay-on-light-button-primary-text-color);
  --hero-overlay-button-primary-border-color: var(--hero-overlay-on-light-button-primary-border-color);
  --hero-overlay-button-secondary-background-color: var(--hero-overlay-on-light-button-secondary-background-color);
  --hero-overlay-button-secondary-hover-background-color: var(--hero-overlay-on-light-button-secondary-hover-background-color);
  --hero-overlay-button-secondary-text-color: var(--hero-overlay-on-light-button-secondary-text-color);
  --hero-overlay-button-secondary-border-color: var(--hero-overlay-on-light-button-secondary-border-color);
}

.fp-button {
  background-color: var(--fp-button-background);
  color: var(--fp-button-text);
  border-color: var(--fp-button-border);
}

.fp-button:hover:not(:disabled) {
  background-color: var(--fp-button-hover-background);
}

.fp-button[data-fp-style="default"] {
  --fp-button-background: var(--button-default-background-color);
  --fp-button-hover-background: var(--button-default-hover-background-color);
  --fp-button-text: var(--button-default-text-color);
  --fp-button-border: var(--button-default-border-color);
}

.fp-button[data-fp-style="primary"] {
  --fp-button-background: var(--button-primary-background-color);
  --fp-button-hover-background: var(--button-primary-hover-background-color);
  --fp-button-text: var(--button-primary-text-color);
  --fp-button-border: var(--button-primary-border-color);
}

.fp-button[data-fp-style="secondary"] {
  --fp-button-background: var(--button-secondary-background-color);
  --fp-button-hover-background: var(--button-secondary-hover-background-color);
  --fp-button-text: var(--button-secondary-text-color);
  --fp-button-border: var(--button-secondary-border-color);
}

.fp-button[data-fp-style="ghost"] {
  --fp-button-background: var(--button-ghost-background-color);
  --fp-button-hover-background: var(--button-ghost-hover-background-color);
  --fp-button-text: var(--button-ghost-text-color);
  --fp-button-border: var(--button-ghost-border-color);
}

.fp-button[data-fp-style="success"] {
  --fp-button-background: var(--button-success-background-color);
  --fp-button-hover-background: var(--button-success-hover-background-color);
  --fp-button-text: var(--button-success-text-color);
  --fp-button-border: var(--button-success-border-color);
}

.fp-button[data-fp-style="warning"] {
  --fp-button-background: var(--button-warning-background-color);
  --fp-button-hover-background: var(--button-warning-hover-background-color);
  --fp-button-text: var(--button-warning-text-color);
  --fp-button-border: var(--button-warning-border-color);
}

.fp-button[data-fp-style="danger"] {
  --fp-button-background: var(--button-danger-background-color);
  --fp-button-hover-background: var(--button-danger-hover-background-color);
  --fp-button-text: var(--button-danger-text-color);
  --fp-button-border: var(--button-danger-border-color);
}

.fp-button-raised {
  box-shadow: var(--button-shadow);
}

.fp-button-raised:hover:not(:disabled) {
  box-shadow: var(--button-shadow-hover);
}

.fp-button-raised:active:not(:disabled) {
  box-shadow: var(--button-shadow-active);
}

.fp-button:active:not(:disabled) {
  transform: translateY(1px);
}

.fp-button-flat:active:not(:disabled) {
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
}