/* =========================================================

   REDOVAR CHANGELOG

   Developed by Cavendish Pierre-Louis

   https://cavendishpierrelouis.io

   IMPORTANT:

   This stylesheet owns CHANGELOG CONTENT ONLY.

   Header, dropdown navigation, mobile navigation,
   footer, privacy choices and all shared Redovar
   site chrome remain owned by:

   files/css/header-footer.css

========================================================= */


/* =========================================================

   CHANGELOG VARIABLES

========================================================= */

.changelog-main {

  --changelog-blue: #0B369A;

  --changelog-blue-hover: #2450A8;

  --changelog-terra: #C34811;

  --changelog-black: #111111;

  --changelog-text: #171717;

  --changelog-muted: #6B6B68;

  --changelog-soft: #8B8B86;

  --changelog-border: #E7E7E3;

  --changelog-hover: #F7F7F5;

  --changelog-hover-strong: #F2F2EF;

  --changelog-white: #FFFFFF;

  --changelog-radius: 4px;

  --changelog-header-h: 76px;

  --changelog-max: 1480px;

  --changelog-gutter:
    clamp(
      24px,
      4.4vw,
      72px
    );

  width: 100%;

  margin: 0;

  padding:
    var(--changelog-header-h)
    0
    0;

  background:
    var(--changelog-white);

  color:
    var(--changelog-text);

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


/* =========================================================

   LOCAL RESET

========================================================= */

.changelog-main *,
.changelog-main *::before,
.changelog-main *::after {

  box-sizing:
    border-box;

}

.changelog-main a {

  color:
    inherit;

  text-decoration:
    none;

}

.changelog-main button,
.changelog-main input {

  font-family:
    inherit;

}

.changelog-main img {

  display:
    block;

}

.changelog-main ::selection {

  background:
    rgba(
      11,
      54,
      154,
      .14
    );

}


/* =========================================================

   DESKTOP WORKSPACE

========================================================= */

.changelog-workspace {

  width:
    100%;

  height:
    calc(
      100svh -
      var(--changelog-header-h)
    );

  min-height:
    620px;

  overflow:
    hidden;

  background:
    var(--changelog-white);

}


.changelog-shell {

  width:
    min(
      calc(
        100% -
        (
          var(--changelog-gutter)
          *
          2
        )
      ),
      var(--changelog-max)
    );

  height:
    100%;

  margin-inline:
    auto;

  display:
    grid;

  grid-template-columns:
    minmax(
      190px,
      236px
    )
    minmax(
      0,
      760px
    )
    minmax(
      160px,
      200px
    );

  justify-content:
    space-between;

  column-gap:
    clamp(
      36px,
      4.6vw,
      74px
    );

}


/* =========================================================

   LEFT RAIL

========================================================= */

.changelog-left {

  min-width:
    0;

  padding:
    clamp(
      38px,
      5vh,
      58px
    )
    0
    42px;

  overflow:
    hidden;

}


/* =========================================================

   PAGE TITLE

========================================================= */

.changelog-left h1 {

  margin:
    0
    0
    clamp(
      38px,
      5vh,
      54px
    );

  color:
    var(--changelog-black);

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    clamp(
      37px,
      3.2vw,
      48px
    );

  font-weight:
    500;

  letter-spacing:
    -.048em;

  line-height:
    .96;

}


/* =========================================================

   SEARCH

========================================================= */

.changelog-search {

  width:
    100%;

  margin:
    0;

}


.changelog-search-field {

  width:
    100%;

  min-height:
    44px;

  padding:
    0
    9px
    0
    13px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    0;

  border-radius:
    var(--changelog-radius);

  background:
    var(--changelog-hover);

  transition:
    background-color
    160ms
    ease;

}


.changelog-search-field:hover {

  background:
    var(--changelog-hover-strong);

}


.changelog-search-field:focus-within {

  border:
    0;

  outline:
    0;

  background:
    var(--changelog-hover-strong);

}


/* =========================================================

   SEARCH ICON

========================================================= */

.changelog-search-icon {

  flex:
    0
    0
    16px;

  width:
    16px;

  height:
    16px;

  object-fit:
    contain;

  opacity:
    .72;

  pointer-events:
    none;

}


/* =========================================================

   SEARCH INPUT

========================================================= */

.changelog-search-field input {

  width:
    100%;

  min-width:
    0;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--changelog-text);

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    11px;

  font-weight:
    450;

  line-height:
    1;

}


.changelog-search-field input::placeholder {

  color:
    var(--changelog-soft);

  opacity:
    1;

}


/* =========================================================

   COMMAND K

========================================================= */

.changelog-search-field kbd {

  flex:
    0
    0
    auto;

  min-width:
    34px;

  height:
    24px;

  padding:
    0
    6px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    4px;

  background:
    var(--changelog-white);

  color:
    var(--changelog-soft);

  box-shadow:
    0
    1px
    2px
    rgba(
      17,
      17,
      17,
      .035
    );

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    8px;

  font-weight:
    500;

  line-height:
    1;

  white-space:
    nowrap;

}


/* =========================================================

   CATEGORIES

========================================================= */

.changelog-categories {

  margin-top:
    clamp(
      31px,
      4vh,
      42px
    );

}


.changelog-categories h2 {

  margin:
    0
    0
    11px;

  color:
    var(--changelog-text);

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.4;

}


.changelog-category-list {

  display:
    grid;

  gap:
    1px;

}


.changelog-category {

  position:
    relative;

  width:
    100%;

  min-height:
    38px;

  padding:
    0
    13px
    0
    15px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    0;

  border-radius:
    var(--changelog-radius);

  background:
    transparent;

  color:
    var(--changelog-muted);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    color
    150ms
    ease,
    background-color
    150ms
    ease;

}


.changelog-category::before {

  content:
    "";

  position:
    absolute;

  top:
    7px;

  bottom:
    7px;

  left:
    0;

  width:
    2px;

  border-radius:
    99px;

  background:
    transparent;

}


/* =========================================================

   CATEGORY ICONS

========================================================= */

.changelog-category-icon {

  flex:
    0
    0
    15px;

  width:
    15px;

  height:
    15px;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  filter:
    brightness(0)
    saturate(100%);

  opacity:
    .88;

  pointer-events:
    none;

  user-select:
    none;

}


/* =========================================================

   CATEGORY INTERACTION

========================================================= */

.changelog-category:hover,
.changelog-category:focus-visible {

  color:
    var(--changelog-text);

  background:
    var(--changelog-hover);

}


.changelog-category.is-active {

  color:
    var(--changelog-blue);

  background:
    var(--changelog-hover);

}


.changelog-category.is-active::before {

  background:
    var(--changelog-blue);

}


.changelog-category:focus-visible {

  outline:
    2px solid
    var(--changelog-blue);

  outline-offset:
    3px;

}


/* =========================================================

   CENTER SCROLLER

========================================================= */

.changelog-center {

  min-width:
    0;

  min-height:
    0;

  height:
    100%;

  padding:
    clamp(
      46px,
      5.5vh,
      66px
    )
    4px
    0;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior-y:
    auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    #D9D9D5
    transparent;

  scroll-behavior:
    smooth;

}


.changelog-center::-webkit-scrollbar {

  width:
    6px;

}


.changelog-center::-webkit-scrollbar-track {

  background:
    transparent;

}


.changelog-center::-webkit-scrollbar-thumb {

  border-radius:
    99px;

  background:
    #D9D9D5;

}


.changelog-center:focus {

  outline:
    none;

}


/* =========================================================

   FEED

========================================================= */

.changelog-feed {

  width:
    100%;

  min-height:
    100%;

}


/* =========================================================

   MONTH

========================================================= */

.changelog-month {

  width:
    100%;

  scroll-margin-top:
    24px;

}


.changelog-month[hidden] {

  display:
    none;

}


.changelog-month-heading {

  margin:
    0
    0
    22px;

  display:
    block;

}


.changelog-month-heading h2 {

  margin:
    0;

  color:
    var(--changelog-black);

  font-size:
    clamp(
      25px,
      2vw,
      31px
    );

  font-weight:
    500;

  letter-spacing:
    -.04em;

  line-height:
    1;

}


/* =========================================================

   TIMELINE

========================================================= */

.changelog-timeline {

  position:
    relative;

  width:
    100%;

  display:
    grid;

  gap:
    12px;

}


.changelog-timeline::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    15px;

  width:
    1px;

  background:
    var(--changelog-border);

}


/* =========================================================

   RELEASE

========================================================= */

.changelog-release {

  position:
    relative;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    31px
    minmax(
      0,
      1fr
    );

  column-gap:
    16px;

  align-items:
    start;

}


.changelog-release[hidden] {

  display:
    none;

}


/* =========================================================

   TIMELINE ASTERISK MARKER

   Release colors alternate automatically:

   TERRACOTTA
   BLACK
   TERRACOTTA
   BLACK

========================================================= */

.changelog-release-marker {

  position:
    relative;

  z-index:
    2;

  width:
    31px;

  min-height:
    100%;

  padding-top:
    20px;

  display:
    flex;

  justify-content:
    center;

  color:
    var(--changelog-black);

}


.changelog-release-marker::before {

  content:
    "";

  position:
    absolute;

  top:
    17px;

  left:
    50%;

  width:
    25px;

  height:
    25px;

  border-radius:
    50%;

  background:
    var(--changelog-white);

  transform:
    translateX(
      -50%
    );

}


.changelog-asterisk {

  position:
    relative;

  z-index:
    1;

  width:
    18px;

  height:
    18px;

  display:
    block;

  background:
    currentColor;

  -webkit-mask:
    url("../../assets/icons/asterisk-solid-svgrepo-com.svg")
    center
    /
    contain
    no-repeat;

  mask:
    url("../../assets/icons/asterisk-solid-svgrepo-com.svg")
    center
    /
    contain
    no-repeat;

  pointer-events:
    none;

}


.changelog-release-marker.is-marker-black {

  color:
    var(--changelog-black);

}


.changelog-release-marker.is-marker-terra {

  color:
    var(--changelog-terra);

}


/* =========================================================

   CLICKABLE RELEASE SURFACE

========================================================= */

.changelog-release-card {

  position:
    relative;

  min-width:
    0;

  padding:
    19px
    20px
    21px;

  border-radius:
    var(--changelog-radius);

  background:
    transparent;

  transition:
    background-color
    160ms
    ease;

}


.changelog-release-card:hover,
.changelog-release-card:focus-visible {

  background:
    var(--changelog-hover);

}


.changelog-release-card:focus-visible {

  outline:
    2px solid
    var(--changelog-blue);

  outline-offset:
    2px;

}


.changelog-release-card time {

  display:
    block;

  margin:
    0
    0
    7px;

  color:
    var(--changelog-soft);

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    -.005em;

  line-height:
    1.3;

}


.changelog-release-card h3 {

  margin:
    0;

  color:
    var(--changelog-black);

  font-size:
    clamp(
      18px,
      1.4vw,
      21px
    );

  font-weight:
    550;

  letter-spacing:
    -.027em;

  line-height:
    1.16;

  transition:
    color
    150ms
    ease;

}


.changelog-release-card p {

  max-width:
    650px;

  margin:
    7px
    0
    0;

  color:
    var(--changelog-muted);

  font-size:
    clamp(
      12px,
      .9vw,
      13px
    );

  font-weight:
    400;

  letter-spacing:
    -.004em;

  line-height:
    1.58;

}


.changelog-release-card:hover h3,
.changelog-release-card:focus-visible h3 {

  color:
    var(--changelog-blue);

}


/* =========================================================

   EMPTY STATE

========================================================= */

.changelog-empty {

  margin:
    34px
    0
    0
    47px;

  padding:
    32px;

  border-radius:
    var(--changelog-radius);

  background:
    var(--changelog-hover);

  text-align:
    center;

}


.changelog-empty[hidden] {

  display:
    none;

}


.changelog-empty p {

  margin:
    0;

  color:
    var(--changelog-muted);

  font-size:
    12px;

  line-height:
    1.5;

}


/* =========================================================

   FEED END

========================================================= */

.changelog-feed-end {

  height:
    clamp(
      90px,
      14vh,
      150px
    );

}


/* =========================================================

   RIGHT RAIL

========================================================= */

.changelog-right {

  min-width:
    0;

  padding:
    clamp(
      54px,
      6.5vh,
      76px
    )
    0
    42px;

}


.changelog-month-nav {

  position:
    relative;

  padding-left:
    18px;

}


.changelog-month-nav::before {

  content:
    "";

  position:
    absolute;

  top:
    34px;

  bottom:
    2px;

  left:
    0;

  width:
    1px;

  background:
    var(--changelog-border);

}


/* =========================================================

   JUMP TO MONTH TITLE

========================================================= */

.changelog-month-nav-title {

  margin:
    0
    0
    15px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.changelog-month-nav-title img {

  flex:
    0
    0
    15px;

  width:
    15px;

  height:
    15px;

  object-fit:
    contain;

  opacity:
    .74;

  pointer-events:
    none;

}


.changelog-month-nav-title h2 {

  margin:
    0;

  color:
    var(--changelog-text);

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.4;

}


/* =========================================================

   MONTH LINKS

========================================================= */

.changelog-month-link {

  position:
    relative;

  min-height:
    31px;

  display:
    flex;

  align-items:
    center;

  color:
    var(--changelog-muted);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.3;

  transition:
    color
    150ms
    ease;

}


a.changelog-month-link:hover,
a.changelog-month-link:focus-visible {

  color:
    var(--changelog-blue);

}


.changelog-month-link.is-active {

  color:
    var(--changelog-blue);

}


.changelog-month-link.is-active::before {

  content:
    "";

  position:
    absolute;

  left:
    -18px;

  top:
    5px;

  bottom:
    5px;

  width:
    2px;

  border-radius:
    99px;

  background:
    var(--changelog-blue);

}


.changelog-month-link--history {

  color:
    var(--changelog-soft);

  cursor:
    default;

}


/* =========================================================

   ACCESSIBILITY

========================================================= */

.changelog-visually-hidden {

  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;

}


/* =========================================================

   SMALL DESKTOP

========================================================= */

@media (max-width: 1180px) {

  .changelog-shell {

    grid-template-columns:
      190px
      minmax(
        0,
        1fr
      )
      150px;

    column-gap:
      32px;

  }


  .changelog-release-card {

    padding-right:
      16px;

  }

}


/* =========================================================

   TABLET / MOBILE

========================================================= */

@media (max-width: 900px) {

  .changelog-main {

    padding-top:
      var(--changelog-header-h);

  }


  .changelog-workspace {

    height:
      auto;

    min-height:
      0;

    overflow:
      visible;

  }


  .changelog-shell {

    width:
      calc(
        100% -
        44px
      );

    height:
      auto;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      0;

  }


  .changelog-left {

    padding:
      48px
      0
      36px;

    overflow:
      visible;

  }


  .changelog-left h1 {

    margin-bottom:
      34px;

    font-size:
      clamp(
        38px,
        8vw,
        48px
      );

  }


  .changelog-search {

    max-width:
      420px;

  }


  .changelog-categories {

    margin-top:
      27px;

  }


  .changelog-category-list {

    display:
      flex;

    flex-wrap:
      nowrap;

    gap:
      6px;

    overflow-x:
      auto;

    padding-bottom:
      4px;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;

  }


  .changelog-category-list::-webkit-scrollbar {

    display:
      none;

  }


  .changelog-category {

    flex:
      0
      0
      auto;

    width:
      auto;

    min-height:
      36px;

    padding:
      0
      13px;

  }


  .changelog-category::before {

    display:
      none;

  }


  .changelog-center {

    height:
      auto;

    padding:
      14px
      0
      0;

    overflow:
      visible;

    scrollbar-width:
      auto;

  }


  .changelog-right {

    order:
      -1;

    padding:
      0
      0
      34px;

  }


  .changelog-month-nav {

    padding-left:
      0;

    display:
      flex;

    align-items:
      center;

    flex-wrap:
      wrap;

    gap:
      7px
      20px;

  }


  .changelog-month-nav::before {

    display:
      none;

  }


  .changelog-month-nav-title {

    width:
      100%;

    margin-bottom:
      3px;

  }


  .changelog-month-link {

    min-height:
      26px;

  }


  .changelog-month-link.is-active::before {

    display:
      none;

  }

}


/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 620px) {

  .changelog-shell {

    width:
      calc(
        100% -
        40px
      );

  }


  .changelog-left {

    padding-top:
      42px;

  }


  .changelog-left h1 {

    font-size:
      clamp(
        36px,
        10vw,
        44px
      );

  }


  .changelog-search-field kbd {

    display:
      none;

  }


  .changelog-month-heading h2 {

    font-size:
      25px;

  }


  .changelog-release {

    grid-template-columns:
      27px
      minmax(
        0,
        1fr
      );

    column-gap:
      11px;

  }


  .changelog-timeline::before {

    left:
      13px;

  }


  .changelog-release-marker {

    width:
      27px;

  }


  .changelog-asterisk {

    width:
      16px;

    height:
      16px;

  }


  .changelog-release-marker::before {

    width:
      22px;

    height:
      22px;

  }


  .changelog-release-card {

    padding:
      18px
      14px
      20px;

  }


  .changelog-release-card h3 {

    font-size:
      19px;

  }


  .changelog-release-card p {

    font-size:
      12px;

    line-height:
      1.62;

  }


  .changelog-empty {

    margin-left:
      38px;

  }

}

/* Phone and tablet month picker: retain the desktop rail, replace it with a
   compact calendar trigger and branded dialog on smaller screens. */
@media (max-width: 900px) {
  .changelog-shell { position: relative; }
  .changelog-workspace { position: relative; }
  .changelog-right {
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 3;
    width: auto;
    padding: 0;
  }
  .changelog-month-nav { padding: 0; }
  .changelog-month-nav-title {
    width: 38px;
    height: 38px;
    margin: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .changelog-month-nav-title h2,
  .changelog-month-nav > .changelog-month-link { display: none; }
  .changelog-month-nav-title img { width: 18px; height: 18px; opacity: .74; }
  .changelog-month-dialog[hidden] { display: none; }
  .changelog-month-dialog { position: absolute; top: 86px; right: 22px; z-index: 200; width: min(260px, calc(100vw - 44px)); }
  .changelog-month-dialog-backdrop { display: none; }
  .changelog-month-dialog-panel { position: relative; width: 100%; padding: 0; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.14); overflow: hidden; }
  .changelog-month-dialog-head { display: flex; align-items: center; justify-content: flex-end; min-height: 28px; padding: 8px 10px 4px; }
  .changelog-month-dialog-head h2 { margin: 0; color: var(--changelog-soft); font-size: 9px !important; line-height: 1.1 !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .changelog-month-dialog-panel a,
  .changelog-month-dialog-panel span { display: flex; justify-content: space-between; padding: 10px; color: var(--changelog-text); font-size: 12px; text-decoration: none; border-top: 1px solid var(--changelog-border); }
  .changelog-month-dialog-panel a { color: var(--changelog-blue); font-weight: 600; }
  .changelog-month-dialog-panel small { color: var(--changelog-soft); font-size: 11px; }
}

@media (max-width: 620px) {
  .changelog-right { top: 40px; }
}


/* =========================================================

   TOUCH

========================================================= */

@media (hover: none) {

  .changelog-release-card:hover {

    background:
      transparent;

  }


  .changelog-release-card:hover h3 {

    color:
      var(--changelog-black);

  }


  .changelog-category:hover {

    background:
      transparent;

    color:
      var(--changelog-muted);

  }


  .changelog-category.is-active:hover {

    background:
      var(--changelog-hover);

    color:
      var(--changelog-blue);

  }


  .changelog-search-field:hover {

    background:
      var(--changelog-hover);

  }

}


/* =========================================================

   REDUCED MOTION

========================================================= */

@media (prefers-reduced-motion: reduce) {

  html,
  .changelog-center {

    scroll-behavior:
      auto;

  }


  .changelog-release-card,
  .changelog-release-card h3,
  .changelog-category,
  .changelog-search-field,
  .changelog-month-link {

    transition:
      none;

  }

}