/*
|--------------------------------------------------------------------------
| FortuneSpace Theme V3 — Appearance Control
|--------------------------------------------------------------------------
|
| Public System / Light / Dark appearance selector.
|
*/


/* ================================================================
   CONTROL ROOT
   ================================================================ */

.fs-theme-control {
  position:
    relative;

  display:
    inline-flex;

  flex:
    0 0 auto;

  align-items:
    center;

  justify-content:
    center;

  z-index:
    120;
}


/* ================================================================
   TRIGGER
   ================================================================ */

.fs-theme-trigger {
  display:
    inline-grid;

  width:
    42px;

  height:
    42px;

  padding:
    0;

  place-items:
    center;

  color:
    var(--fs-text-secondary);

  background:
    var(--fs-surface);

  border:
    1px solid var(--fs-border-strong);

  border-radius:
    13px;

  box-shadow:
    var(--fs-shadow-sm);

  cursor:
    pointer;

  transition:
    color var(--fs-motion-fast) ease,
    background-color var(--fs-motion-fast) ease,
    border-color var(--fs-motion-fast) ease,
    box-shadow var(--fs-motion-fast) ease,
    transform var(--fs-motion-fast) ease;
}


.fs-theme-trigger:hover {
  color:
    var(--fs-text);

  background:
    var(--fs-surface-raised);

  border-color:
    var(--fs-border-emphasis);

  transform:
    translateY(-1px);
}


.fs-theme-trigger:focus-visible {
  outline:
    none;

  box-shadow:
    var(--fs-focus);
}


.fs-theme-trigger svg {
  width:
    19px;

  height:
    19px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ================================================================
   MENU
   ================================================================ */

.fs-theme-menu {
  position:
    absolute;

  z-index:
    500;

  top:
    calc(100% + 10px);

  right:
    0;

  width:
    238px;

  padding:
    8px;

  color:
    var(--fs-text);

  background:
    var(--fs-surface);

  border:
    1px solid var(--fs-border);

  border-radius:
    16px;

  box-shadow:
    var(--fs-shadow-lg);
}


.fs-theme-menu[hidden] {
  display:
    none !important;
}


.fs-theme-menu__title {
  padding:
    8px 10px 7px;

  color:
    var(--fs-text-muted);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .055em;

  text-transform:
    uppercase;
}


/* ================================================================
   OPTIONS
   ================================================================ */

.fs-theme-option {
  position:
    relative;

  display:
    grid;

  width:
    100%;

  min-height:
    54px;

  padding:
    8px 36px 8px 10px;

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

  gap:
    10px;

  align-items:
    center;

  color:
    var(--fs-text);

  background:
    transparent;

  border:
    0;

  border-radius:
    11px;

  cursor:
    pointer;

  font:
    inherit;

  text-align:
    left;

  transition:
    background-color var(--fs-motion-fast) ease;
}


.fs-theme-option:hover,
.fs-theme-option:focus-visible {
  background:
    var(--fs-surface-raised);

  outline:
    none;
}


.fs-theme-option.is-selected {
  background:
    var(--fs-brand-soft);
}


.fs-theme-option__icon {
  display:
    grid;

  width:
    32px;

  height:
    32px;

  place-items:
    center;

  color:
    var(--fs-text-secondary);

  background:
    var(--fs-surface-soft);

  border:
    1px solid var(--fs-border);

  border-radius:
    9px;
}


.fs-theme-option.is-selected
.fs-theme-option__icon {
  color:
    var(--fs-brand);

  background:
    var(--fs-brand-softer);

  border-color:
    rgba(34,197,94,.22);
}


.fs-theme-option__icon svg {
  width:
    16px;

  height:
    16px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.fs-theme-option__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.fs-theme-option__name {
  color:
    var(--fs-text);

  font-size:
    14px;

  font-weight:
    750;
}


.fs-theme-option__hint {
  overflow:
    hidden;

  color:
    var(--fs-text-muted);

  font-size:
    12px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.fs-theme-option__check {
  position:
    absolute;

  right:
    12px;

  top:
    50%;

  display:
    grid;

  width:
    20px;

  height:
    20px;

  place-items:
    center;

  color:
    var(--fs-brand);

  transform:
    translateY(-50%);

  opacity:
    0;
}


.fs-theme-option.is-selected
.fs-theme-option__check {
  opacity:
    1;
}


.fs-theme-option__check svg {
  width:
    15px;

  height:
    15px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2.3;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ================================================================
   PEARL
   ================================================================ */

html[data-fs-theme="light"]
.fs-theme-trigger {
  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 4px 15px rgba(23,33,26,.065);
}


html[data-fs-theme="light"]
.fs-theme-menu {
  box-shadow:
    0 18px 48px rgba(23,33,26,.13);
}


/* ================================================================
   AUTH PAGES
   ================================================================ */

.fs-theme-control--auth {
  position:
    fixed;

  top:
    max(18px, env(safe-area-inset-top));

  right:
    max(18px, env(safe-area-inset-right));

  z-index:
    900;
}


/* ================================================================
   SMALL SCREENS
   ================================================================ */

@media (max-width: 640px) {

  .fs-theme-trigger {
    width:
      38px;

    height:
      38px;

    border-radius:
      12px;
  }


  .fs-theme-trigger svg {
    width:
      18px;

    height:
      18px;
  }


  .fs-theme-menu {
    position:
      fixed;

    top:
      auto;

    right:
      12px;

    bottom:
      calc(12px + env(safe-area-inset-bottom));

    left:
      12px;

    width:
      auto;

    max-width:
      none;

    padding:
      9px;

    border-radius:
      18px;
  }


  .fs-theme-menu__title {
    padding:
      9px 10px;
  }


  .fs-theme-option {
    min-height:
      58px;
  }


  .fs-theme-control--auth {
    top:
      max(12px, env(safe-area-inset-top));

    right:
      max(12px, env(safe-area-inset-right));
  }

}


/* Very narrow guest headers */

@media (max-width: 430px) {

  .fs-appbar .fs-theme-control {
    margin-left:
      2px;
  }


  .fs-appbar .fs-theme-trigger {
    width:
      34px;

    height:
      34px;

    border-radius:
      10px;
  }


  .fs-appbar .fs-theme-trigger svg {
    width:
      16px;

    height:
      16px;
  }

}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

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

  .fs-theme-trigger,
  .fs-theme-option {
    transition:
      none !important;

    transform:
      none !important;
  }

}


/* ================================================================
   PHASE 1G.1 — HEADER PREFERENCES CLUSTER
   ================================================================ */

.fs-header-preferences {
  display:
    inline-flex;

  min-width:
    0;

  flex:
    0 0 auto;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


/* ================================================================
   PHASE 1G.1 — TRUE MOBILE VIEWPORT SHEET
   ================================================================ */

/*
 * The menu receives this class only while it has been portaled
 * directly under <body>. It is therefore no longer trapped by the
 * glass/backdrop-filter header.
 */

@media (max-width: 640px) {

  .fs-theme-menu.fs-theme-menu--portal {
    position:
      fixed !important;

    z-index:
      5000 !important;

    top:
      auto !important;

    right:
      12px !important;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      ) !important;

    left:
      12px !important;

    width:
      auto !important;

    max-width:
      none !important;

    max-height:
      calc(
        100dvh -
        24px -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
      );

    overflow-y:
      auto;

    transform:
      none !important;

    border-radius:
      20px;

    box-shadow:
      0 24px 70px
      rgba(2,6,23,.24);
  }


  .fs-header-preferences {
    gap:
      5px;
  }

}


/* ================================================================
   VERY SMALL MOBILE HEADER
   ================================================================ */

@media (max-width: 430px) {

  .fs-header-preferences {
    gap:
      4px;
  }


  .fs-header-preferences
  .fs-language-switcher {
    flex:
      0 0 auto;
  }


  /*
   * Theme button stays beside the language selector rather than
   * creating its own third row.
   */

  .fs-header-preferences
  .fs-theme-control {
    position:
      relative;

    flex:
      0 0 auto;

    margin:
      0 !important;
  }

}


/* ================================================================
   PHASE 1G.2 — DESKTOP VIEWPORT PORTAL
   ================================================================ */

/*
 * Desktop Appearance menus also live directly under <body>.
 * This prevents sticky/backdrop-filter/glass header layers from
 * clipping the dropdown.
 */

.fs-theme-menu.fs-theme-menu--portal {
  position:
    fixed !important;

  z-index:
    5000 !important;

  top:
    var(
      --fs-theme-menu-top,
      80px
    ) !important;

  left:
    var(
      --fs-theme-menu-left,
      12px
    ) !important;

  right:
    auto !important;

  bottom:
    auto !important;
}


/*
 * Preserve the mobile bottom-sheet behavior added in Phase 1G.1.
 */

@media (max-width: 640px) {

  .fs-theme-menu.fs-theme-menu--portal {
    top:
      auto !important;

    right:
      12px !important;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      ) !important;

    left:
      12px !important;
  }

}


/* ================================================================
   THEME V3 FINAL QA — DESKTOP MENU COPY
   ================================================================ */

/*
 * Portuguese and French appearance descriptions need slightly more
 * room than the original 238px prototype.
 */

@media (min-width: 641px) {

  .fs-theme-menu {
    width:
      270px;
  }


  .fs-theme-menu.fs-theme-menu--portal {
    width:
      270px !important;
  }


  .fs-theme-option__hint {
    white-space:
      normal;

    line-height:
      1.25;
  }

}