/**
 * Communicate faux-UI kit (FUI)
 * Reusable product-flavored pieces for marketing compositions.
 * Not the live app — abstracted density, honest structure.
 *
 * Campaign tones (soft fill + dark label + matching dark stroke icon, no tile):
 *   rose · violet · amber · mint · sky · peach · slate
 *
 * Status: draft · review · scheduled · published · blocked
 */

/* Decorative mockups only — labels/status copy should not highlight with real page text.
   Library page copy (fui-lib__*) is unrelated and stays selectable. */
.fui,
[class^="fui-"],
[class*=" fui-"] {
  -webkit-user-select: none;
  user-select: none;
}

.fui {
  --fui-ink: #111318;
  --fui-carbon: #203340;
  /* Keep in lockstep with site --w-paper / --w-rule (bright paper ramp) */
  --fui-paper: #faf9f7;
  --fui-rule: #edebe5;
  --fui-indigo: #4f46e5;
  --fui-marker: #dce64a;
  --fui-font: "DM Sans", sans-serif;
  font-family: var(--fui-font);
  color: var(--fui-ink);
}

/* —— Campaign pills (the star of the kit) —— */
.fui-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
  /* Compact rounded-rect (not stadium capsule) */
  padding: 0.2rem 0.45rem 0.2rem 0.35rem;
  border-radius: 0.4375rem; /* 7px */
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(17, 19, 24, 0.05);
}

/* Icon stands alone — inherits pill label color, no square tile */
.fui-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  line-height: 0;
}

.fui-pill__icon svg {
  width: 0.72rem;
  height: 0.72rem;
  display: block;
}

/* Facebook "f" is optically slightly lighter; modest size bump */
.fui-pill__icon--fb svg {
  width: 0.76rem;
  height: 0.76rem;
}

.fui-pill__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.05rem;
}

.fui-pill--sm {
  padding: 0.12rem 0.36rem 0.12rem 0.28rem;
  font-size: 0.625rem;
  gap: 0.2rem;
  border-radius: 0.375rem; /* 6px */
}

.fui-pill--sm .fui-pill__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

.fui-pill--sm .fui-pill__icon svg {
  width: 0.62rem;
  height: 0.62rem;
}

.fui-pill--sm .fui-pill__icon--fb svg {
  width: 0.66rem;
  height: 0.66rem;
}

/*
 * Tones: mid fill, darker border, dark label + matching icon stroke.
 * Warm / paper-friendly — not neon, not washed pastel.
 */
.fui-pill--rose {
  background: #efc0b8;
  border-color: #dfa399;
  color: #5c2823;
}

.fui-pill--violet {
  background: #d4c6ef;
  border-color: #beaadf;
  color: #352450;
}

.fui-pill--amber {
  background: #ecd98c;
  border-color: #d9c46e;
  color: #4f4010;
}

.fui-pill--mint {
  background: #b5dfc9;
  border-color: #96cbb0;
  color: #1a4735;
}

.fui-pill--sky {
  background: #b9d2f2;
  border-color: #9abce6;
  color: #1a3a5c;
}

.fui-pill--peach {
  background: #eec9a0;
  border-color: #e0b07e;
  color: #5c3412;
}

.fui-pill--slate {
  background: #cdd5dd;
  border-color: #b2bdc8;
  color: #24313c;
}

/* —— Campus / tag chips —— */
.fui-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: #eef1f4;
  color: var(--fui-carbon);
  border: 1px solid #dde3e8;
  white-space: nowrap;
  line-height: 1.2;
}

.fui-tag__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: -0.05rem;
}

.fui-tag svg,
.fui-tag__icon svg {
  width: 0.72rem;
  height: 0.72rem;
  flex-shrink: 0;
  display: block;
}

.fui-tag--global {
  background: rgba(79, 70, 229, 0.1);
  border-color: rgba(79, 70, 229, 0.22);
  color: var(--fui-indigo);
}

/* Single campus / location chips (same pin icon as global) */
.fui-tag--campus {
  background: rgba(32, 51, 64, 0.08);
  border-color: rgba(32, 51, 64, 0.16);
  color: var(--fui-carbon, #203340);
}

.fui-tag--campaign {
  background: var(--fui-marker);
  border-color: #cfd84a;
  color: var(--fui-ink);
}

/* Assign control (message card foot) */
.fui-assign {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem 0.28rem 0.4rem;
  border-radius: 9999px;
  background: #eef1f4;
  border: 1px solid #dde3e8;
  color: var(--fui-carbon);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.fui-assign__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--fui-carbon);
}

.fui-assign__icon svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}

.fui-assign__label {
  display: block;
  line-height: 1;
  transform: translateY(0.5px); /* optical center with stroke icons */
}

/* —— Status —— */
.fui-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem 0.22rem 0.4rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid var(--fui-rule);
  background: #fff;
  color: var(--fui-carbon);
}

.fui-status__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: #9aa3ab;
}

/* Communication: Draft · Active · Done */
.fui-status--draft .fui-status__dot { background: #9aa3ab; }
.fui-status--active .fui-status__dot { background: var(--fui-indigo); }
.fui-status--done .fui-status__dot { background: #2f9b63; }
/* Campaign: Draft · Active · Archived */
.fui-status--archived .fui-status__dot { background: #7a8490; }
/* Assignment progress: Received · In Progress · On Hold · Complete */
.fui-status--received .fui-status__dot { background: #9aa3ab; }
.fui-status--progress .fui-status__dot { background: #e0a800; }
.fui-status--hold .fui-status__dot { background: #c44b4b; }
.fui-status--complete .fui-status__dot { background: #2f9b63; }
/* Legacy aliases (prefer product kinds above) */
.fui-status--review .fui-status__dot { background: #e0a800; }
.fui-status--scheduled .fui-status__dot { background: var(--fui-indigo); }
.fui-status--published .fui-status__dot { background: #2f9b63; }
.fui-status--blocked .fui-status__dot { background: #c44b4b; }

/* —— Segmented control (Week / Day) —— */
.fui-seg {
  display: inline-flex;
  padding: 0.15rem;
  border-radius: 9999px;
  background: #eef1f4;
  border: 1px solid var(--fui-rule);
  gap: 0.1rem;
}

.fui-seg__btn {
  padding: 0.28rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fui-carbon);
  border: 0;
  background: transparent;
  line-height: 1.2;
}

.fui-seg__btn.is-active {
  background: #fff;
  color: var(--fui-ink);
  box-shadow: 0 1px 2px rgba(17, 19, 24, 0.08);
}

/* —— Mini toolbar / today —— */
.fui-today {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--fui-indigo);
  color: #fff;
  border: 0;
}

/* —— Channel row header —— */
.fui-channel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fui-carbon);
}

/* No tile — icon matches label color */
.fui-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  line-height: 0;
}

.fui-channel__icon svg {
  width: 0.85rem;
  height: 0.85rem;
}

.fui-channel__icon--fb svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* —— Empty / add cell —— */
.fui-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  border: 1px dashed #cfd6dc;
  border-radius: 0.5rem;
  color: #9aa3ab;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.5);
}

/* —— Rail icon (sidebar fragment) —— */
.fui-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.45rem;
  width: 2.85rem;
  background: var(--fui-carbon);
  border-radius: 0.85rem;
}

.fui-rail__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
  color: rgba(245, 243, 239, 0.55);
}

.fui-rail__btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.fui-rail__btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* —— Message detail card (mini modal) —— */
.fui-message {
  background: #fff;
  border: 1px solid var(--fui-rule);
  border-radius: 0.85rem;
  padding: 0.85rem 0.95rem;
  box-shadow: 0 14px 28px -16px rgba(17, 19, 24, 0.3);
  text-align: left;
}

.fui-message__title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fui-ink);
  letter-spacing: -0.01em;
}

.fui-message__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

/* Compact post thumbs — Content motif (sky + peaks + sun), equal side-by-side */
.fui-message__media {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.fui-message__thumb {
  --fui-thumb-sky: #e4e6e7;
  --fui-thumb-shape: #c5c9cb;
  position: relative;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2rem;
  border-radius: 0.3rem;
  border: 1px solid var(--fui-rule);
  overflow: hidden;
  background: var(--fui-thumb-sky);
  box-sizing: border-box;
}

.fui-message__sun {
  position: absolute;
  top: 0.18rem;
  right: 0.28rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--fui-thumb-shape);
  z-index: 1;
}

.fui-message__peak {
  position: absolute;
  bottom: 0;
  left: -8%;
  width: 68%;
  height: 58%;
  background: var(--fui-thumb-shape);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.fui-message__peak--sm {
  left: auto;
  right: -4%;
  width: 52%;
  height: 42%;
}

.fui-message__copy {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--fui-paper);
  border: 1px solid var(--fui-rule);
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--fui-carbon);
}

.fui-message__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.fui-message__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--fui-indigo);
  color: #fff;
  border: 0;
}

/* —— Stack of pills in a cell —— */
.fui-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.3rem;
}

/* —— Week column header —— */
.fui-week {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7a8690;
  text-align: center;
  padding-bottom: 0.35rem;
}

/* —— Planning surface (composed board) —— */
.fui-board {
  display: flex;
  background: #f7f8fa;
  border: 1px solid var(--fui-rule);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 48px -22px rgba(17, 19, 24, 0.28),
    0 8px 16px -10px rgba(17, 19, 24, 0.1);
  text-align: left;
}

.fui-board__main {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0.95rem 1rem;
  background:
    linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
}

.fui-board__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.fui-board__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fui-ink);
}

.fui-board__title span {
  font-weight: 500;
  color: #7a8690;
  margin-left: 0.35rem;
}

.fui-board__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fui-board__grid {
  display: grid;
  grid-template-columns: 7.5rem 1fr 1fr 1fr;
  gap: 0.45rem 0.5rem;
  align-items: start;
}

@media (max-width: 520px) {
  .fui-board__grid {
    grid-template-columns: 5.5rem 1fr 1fr;
  }
  .fui-board__grid .fui-week:nth-child(4),
  .fui-board__grid .fui-cell:nth-child(4n) {
    display: none;
  }
}

.fui-cell {
  min-height: 3.4rem;
  padding: 0.35rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid #ebeff2;
}

.fui-board__row-label {
  padding-top: 0.45rem;
}

/* Floating layer helpers for compositions */
.fui-float {
  position: absolute;
  z-index: 3;
  filter: drop-shadow(0 12px 22px rgba(17, 19, 24, 0.14));
}

.fui-float--sm {
  transform: scale(0.92);
  transform-origin: top left;
}

/*
 * Hover lift only for floats that layer *over* a calendar/board.
 * No lift on embedded pills, tags, badges, or the full matrix itself.
 *
 * Hero VBS + oversized channel pills: explicit rules win over entrance
 * animation leftovers and the generic float hover (loaded after site.css).
 */
@media (hover: hover) and (pointer: fine) {
  .fui-float {
    transition:
      transform 140ms cubic-bezier(0.2, 0.6, 0.2, 1),
      filter 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .fui-float:hover {
    transform: translate3d(0, -3px, 0);
    filter: drop-shadow(0 16px 28px rgba(17, 19, 24, 0.2));
  }

  .fui-float--sm:hover {
    transform: scale(0.92) translate3d(0, -3px, 0);
    transform-origin: top left;
  }

  /* Hero VBS message card — lift the paper (not just filter/shadow on the float) */
  .fui-float.site-hero__float-msg {
    transition: filter 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .fui-float.site-hero__float-msg:hover {
    transform: none; /* parent stays put so filter-box doesn't fight translate */
    filter: drop-shadow(0 18px 28px rgba(17, 19, 24, 0.28));
  }

  .fui-float.site-hero__float-msg .fui-message {
    transition:
      transform 140ms cubic-bezier(0.2, 0.6, 0.2, 1),
      box-shadow 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .fui-float.site-hero__float-msg:hover .fui-message {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 16px 32px -14px rgba(17, 19, 24, 0.3);
  }

  /* Hero channel stack: do not lift the whole stack; each enlarged pill lifts alone */
  .fui-float.site-hero__float-pills:hover {
    transform: none;
    filter: drop-shadow(0 14px 24px rgba(17, 19, 24, 0.26));
  }

  .fui-float.site-hero__float-pills .fui-pill {
    transition:
      transform 140ms cubic-bezier(0.2, 0.6, 0.2, 1),
      box-shadow 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .fui-float.site-hero__float-pills .fui-pill:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 6px 14px -6px rgba(17, 19, 24, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fui-float {
    transition: none;
  }

  .fui-float:hover {
    transform: none;
    filter: drop-shadow(0 12px 22px rgba(17, 19, 24, 0.14));
  }

  .fui-float--sm:hover {
    transform: scale(0.92);
  }

  .fui-float.site-hero__float-msg:hover {
    filter: drop-shadow(0 14px 24px rgba(17, 19, 24, 0.26));
  }

  .fui-float.site-hero__float-msg .fui-message {
    transition: none;
  }

  .fui-float.site-hero__float-msg:hover .fui-message {
    transform: none;
    box-shadow: 0 14px 28px -16px rgba(17, 19, 24, 0.3);
  }

  .fui-float.site-hero__float-pills .fui-pill {
    transition: none;
  }

  .fui-float.site-hero__float-pills .fui-pill:hover {
    transform: none;
    box-shadow: none;
  }
}

/* —— Matrix calendar (product-accurate table grid) ——
 * Continuous hairline rules, week column headers, and skinny full-width
 * channel group rows above each content row (not a left label column).
 * Prefer this over .fui-cell card boards when marketing should match the
 * real calendar matrix.
 */
.fui-matrix {
  display: flex;
  background: #fff;
  border: 1px solid #d8dde3;
  border-radius: 0.65rem;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(17, 19, 24, 0.22),
    0 6px 14px -10px rgba(17, 19, 24, 0.08);
  text-align: left;
}

/* Optional carbon rail stays a sibling, not part of the grid */
.fui-matrix > .fui-rail {
  border-radius: 0;
  flex-shrink: 0;
  align-self: stretch;
  justify-content: flex-start;
  padding-top: 1rem;
}

.fui-matrix__main {
  flex: 1;
  min-width: 0;
  background: #fff;
}

.fui-matrix__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid #e5e9ed;
  background: #fafbfc;
}

.fui-matrix__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fui-ink);
}

.fui-matrix__title span {
  font-weight: 500;
  color: #7a8690;
  margin-left: 0.35rem;
}

.fui-matrix__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Continuous table grid — shared horizontal + vertical rules */
.fui-matrix__grid {
  --fui-matrix-cols: 3; /* week columns only — never drop a week on narrow viewports */
  --fui-matrix-line: #e5e9ed;
  display: grid;
  /* min track keeps week columns usable; horizontal scroll on tight screens */
  grid-template-columns: repeat(var(--fui-matrix-cols), minmax(5.25rem, 1fr));
  border-top: 0;
  background: var(--fui-matrix-line); /* shows through as hairlines via gap */
  gap: 1px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4-week boards: slightly tighter tracks so 4 cols fit without ballooning */
.fui-matrix__grid--weeks4 {
  grid-template-columns: repeat(var(--fui-matrix-cols), minmax(4.65rem, 1fr));
}

/* Default cell shell: no card chrome */
.fui-matrix__hd,
.fui-matrix__group,
.fui-matrix__cell {
  background: #fff;
  min-width: 0;
}

/* Week / day column headers */
.fui-matrix__hd {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.5rem;
  background: #f7f8fa;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b7680;
  white-space: nowrap;
}

/*
 * Skinny full-width channel band above the content cells (product pattern).
 * Spans all week columns so every column can hold pills.
 */
.fui-matrix__group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.55rem;
  min-height: 0;
  background: #f3f5f7;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fui-ink);
  line-height: 1.2;
}

/* Decorative expand chevron — matches product matrix group row */
.fui-matrix__group::before {
  content: "";
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.05rem;
  border-right: 1.5px solid #8a959e;
  border-bottom: 1.5px solid #8a959e;
  transform: rotate(45deg) translateY(-0.08rem);
  opacity: 0.85;
}

.fui-matrix__group .fui-channel {
  font-size: inherit;
  color: inherit;
  gap: 0.35rem;
  min-width: 0;
}

.fui-matrix__group .fui-channel > span:last-child {
  line-height: 1.2;
}

.fui-matrix__group .fui-channel__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
}

.fui-matrix__group .fui-channel__icon svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* Grid body cells — pills stack, no radius/card border */
.fui-matrix__cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  padding: 0.4rem 0.4rem;
  min-height: 3.75rem;
  background: #fff;
}

.fui-matrix__cell .fui-stack {
  width: 100%;
  align-items: stretch;
  gap: 0.28rem;
}

/* Full-width campaign pills in matrix cells (product pattern: uniform column fill) */
.fui-matrix__cell .fui-pill {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex; /* block-level flex so width:100% fills cell, not shrink-to-content */
}

/* Subtle empty / add indicator (not a dashed card) */
.fui-matrix__add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  margin: auto 0;
  color: #c0c7ce;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.85;
  user-select: none;
  pointer-events: none;
}

.fui-matrix__cell:hover .fui-matrix__add {
  color: #9aa3ab;
}

@media (max-width: 640px) {
  .fui-matrix__group {
    padding: 0.22rem 0.4rem;
    font-size: 0.625rem;
  }

  .fui-matrix__group .fui-channel > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
    display: block;
  }

  /* Keep all week columns; .fui-matrix__grid already scrolls horizontally */
}

@media (max-width: 420px) {
  .fui-matrix > .fui-rail {
    display: none;
  }
}