/* style/ts.shell.css */
/* v2.0.0-beta */
/* TS shell layout, header, sidebar, and collection-mode styling. */

/* -----------------------------------------------------
   GLOBAL: SCROLLBAR STABILITY
----------------------------------------------------- */

html{
  /* Lock the layout width so centered HUD elements never "jump" on first scroll. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* -----------------------------------------------------
   FONT + BACKGROUND
----------------------------------------------------- */

@font-face{
  font-family: "emerald";
  src: url("../img/fonts/pokemon-emerald-pro.ttf") format("truetype");
  font-display: swap;
}

body{
  background-color: var(--bg);
  background-image: url("../img/symbols/backgroundsprite.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* #page-content layout ownership (shell-active only, browser-safe). */
body.ts-shell-active #page-content{
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Use Emerald for the RPG chrome only. */
#ts-header,
#ts-header *,
#ts-sidebar,
#ts-sidebar *{
  font-family: "emerald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1.05;
}

#ts-header input,
#ts-header select,
#ts-header button,
#ts-sidebar input,
#ts-sidebar select,
#ts-sidebar button{
  font-family: inherit;
}

/* -----------------------------------------------------
   APP SHELL (LEFT SIDEBAR + MAIN CONTENT)
----------------------------------------------------- */

#ts-shell{
  max-width: 1600px;
  margin: 0 auto;
  /* Top pad matches sidebar sticky gap to avoid 1st-scroll "snap". */
  padding: 8px 14px 14px 14px;

  display: grid;
  /* Sidebar is intentionally a bit tighter now (20px narrower). */
  --ts-sidebar-w: 340px;
  grid-template-columns: var(--ts-sidebar-w) minmax(0, 1fr);
  gap: 16px;
  align-items: start;

  transition: grid-template-columns 140ms steps(4, end);
}

/* Main column wraps shell-owned actions (like COLLECT) + route content. */
#ts-main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Shell action row sits INSIDE layout flow (no viewport floating). */
#ts-shell-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Hide the shell action row when empty (COLLECT is free-hovering). */
#ts-shell-actions:empty{
  display: none;
}

@media (max-width: 980px){
  #ts-shell{
    grid-template-columns: 1fr;
    transition: none;
  }
}

/* -----------------------------------------------------
   PANEL FRAME (HARD RPG MENU)
----------------------------------------------------- */

.ts-panel{
  background-color: rgba(12, 16, 20, 0.98);
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 4px
    );

  border: 4px solid rgba(0, 0, 0, 0.95);

  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.95) inset,
    0 0 0 3px rgba(240, 91, 41, 0.22) inset,
    0 10px 0 rgba(0, 0, 0, 0.70);

  position: relative;
}

.ts-panel::after{
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(240, 91, 41, 0.30);
  pointer-events: none;
}

.ts-panel-title{
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px 0;
  color: var(--text-main);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.85);
}

/* -----------------------------------------------------
   HEADER (TOP)
----------------------------------------------------- */

#ts-header{
  /* Full-width sticky rail so scrolled cards never flank the header edges. */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 18px 0 18px;

  position: sticky;
  top: 0;
  z-index: 3000;
}

/* Dark backing behind the sticky header layer. */
#ts-header::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 20, 0.98);
  pointer-events: none;
  z-index: -1;
}

/* Fade-out strip under the header: content darkens and vanishes under the rail. */
#ts-header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(12, 16, 20, 0.78),
    rgba(12, 16, 20, 0.00)
  );
}

#ts-header .ts-header-inner{
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px){
  #ts-header{
    position: relative;
  }

  #ts-header .ts-header-inner{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------
   HEADER RAIL + NAV TABS (QUIET CONTAINER)
----------------------------------------------------- */

#ts-header .ts-banner{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 36px;

  padding: 16px 12px;

  background-color: rgba(12, 16, 20, 0.98);
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 7px
    );

  border: 3px solid rgba(0, 0, 0, 0.92);

  /* Quiet base (no orange until hover/active). */
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.75) inset,
    0 10px 0 rgba(0, 0, 0, 0.68);
}

/* Replace the default panel inner stroke with a subtle steel stroke. */
#ts-header .ts-banner::after{
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(58, 70, 81, 0.55);
  pointer-events: none;
}

/* Left merged plaque: one slab, no nested frames. */
#ts-header .ts-header-plaque{
  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 220px;
  max-width: 520px;
  flex: 0 0 auto;
  width: auto;

  /* This pushes the logo button slightly inward from the rail edge. */
  margin-left: 10px;

  /* Slightly lifted like the tabs. */
  transform: translateY(-4px);

  padding: 10px 12px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.18)
    );
  background-color: rgba(14, 18, 22, 0.98);

  border: 3px solid rgba(0, 0, 0, 0.92);

  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.65) inset,
    0 7px 0 rgba(0,0,0,0.70);

  user-select: none;
  cursor: pointer;
}

#ts-header .ts-header-plaque:hover{
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.65) inset,
    0 0 0 3px rgba(240, 91, 41, 0.40) inset,
    0 7px 0 rgba(0,0,0,0.70);
}

#ts-header .ts-header-plaque:active{
  /* Keep the offset while pressing (do not override the base lift). */
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.65) inset,
    0 0 0 3px rgba(240, 91, 41, 0.40) inset,
    0 6px 0 rgba(0,0,0,0.70);
}

#ts-header .ts-header-plaque:focus-visible{
  outline: 3px solid rgba(240, 91, 41, 0.95);
  outline-offset: 2px;
}

#ts-header .ts-header-plaque-icon{
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}

#ts-header .ts-header-plaque-text{
  min-width: 0;
}

#ts-header .ts-header-guild{
  font-size: 28px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.85);
  margin-bottom: 0;
}

/* Header plaque must never show per-route meta text. */
#ts-header .ts-header-page-title,
#ts-header .ts-header-page-desc{
  display: none !important;
}

/* Nav row (left side). */
#ts-header .nav{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  /* Tabs sit slightly lower than the logo plaque. */
  padding-top: 6px;

  /* Extra breathing room after the plaque. */
  margin-left: 8px;

  gap: 24px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;

  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;

  flex: 0 0 auto;
}

/* Big raised slabs (slightly smaller than the logo plaque). */
#ts-header .nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 42px;
  padding: 0 26px;
  min-width: 124px;

  text-transform: uppercase;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  color: var(--text-main);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.90);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.10),
      rgba(0,0,0,0.24)
    );
  background-color: rgba(18, 24, 30, 0.98);

  border: 3px solid rgba(0,0,0,0.92);

  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.70) inset,
    0 7px 0 rgba(0,0,0,0.72);
}

/* Hover: orange appears only here. */
#ts-header .nav a:hover{
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.70) inset,
    0 0 0 4px rgba(240, 91, 41, 0.55) inset,
    0 7px 0 rgba(0,0,0,0.72);
}

/* Pressed: clear inset/pressed state. */
#ts-header .nav a:active{
  transform: translateY(1px);
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.70) inset,
    0 0 0 4px rgba(240, 91, 41, 0.55) inset,
    0 6px 0 rgba(0,0,0,0.72);
}

/* Active: locked in. Thick orange frame, brighter face. */
#ts-header .nav a.active{
  background-color: rgba(14, 18, 22, 0.98);
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.70) inset,
    0 0 0 5px rgba(240, 91, 41, 0.92) inset,
    0 7px 0 rgba(0,0,0,0.72);
}

#ts-header .nav a:focus-visible{
  outline: 3px solid rgba(240, 91, 41, 0.95);
  outline-offset: 2px;
}

@media (max-width: 980px){
  #ts-header .ts-banner{
    flex-wrap: wrap;
    justify-content: center;
  }

  #ts-header .ts-header-plaque{
    margin-left: 0;
  }

  #ts-header .nav{
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    padding-top: 8px;
  }
}

/* -----------------------------------------------------
   SIDEBAR (REWORKED)
----------------------------------------------------- */

#ts-sidebar{
  position: sticky;
  /* Tighten the dock gap so the sidebar hugs the nav rail. */
  top: calc(var(--ts-header-h, 110px) + 8px);
  align-self: start;
  z-index: 2000;

  /* Fixed sidebar slots: prevents section divider jumping across pages. */
  --ts-side-title-h: 112px;
  --ts-side-status-h: 136px;
  --ts-side-notes-h: 96px;

  /* Fill the viewport like a classic RPG side menu (readable at 1920x1080). */
  height: calc(100vh - var(--ts-header-h, 110px) - 8px);
  max-height: calc(100vh - var(--ts-header-h, 110px) - 8px);
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;

  /* Sidebar has its own panel styling now. */
  background-color: rgba(12, 16, 20, 0.98);
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 7px
    );

  border: 4px solid rgba(0,0,0,0.95);

  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.85) inset,
    0 0 0 3px rgba(240, 91, 41, 0.10) inset,
    0 10px 0 rgba(0,0,0,0.72);

  /* Avoid sub-pixel wobble on scroll: no GPU-hinting for sticky HUD elements. */
  transition: max-height 140ms steps(4, end);
}

#ts-sidebar::after{
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(58, 70, 81, 0.55);
  pointer-events: none;
}

#ts-sidebar .ts-sidebar-inner{
  display: flex;
  flex-direction: column;
  /* Single, unified sidebar frame: avoid stacked internal "panels". */
  gap: 0;

  min-height: 100%;

  height: 100%;

  padding: 10px;
}

/* -----------------------------------------------------
   SIDEBAR: OVERRIDE PANEL INNER STROKE (NO ORANGE)
   Sidebar containers still use .ts-panel, so we must
   override the global orange inner stroke locally.
----------------------------------------------------- */

#ts-sidebar .ts-panel{
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.72) inset,
    0 10px 0 rgba(0, 0, 0, 0.65);
}

#ts-sidebar .ts-panel::after{
  border: 2px solid rgba(58, 70, 81, 0.55);
}


@media (max-width: 980px){
  #ts-sidebar{
    position: relative;
    top: auto;
  }
}

/* Unified sidebar frame: inner blocks are content regions, not framed panels. */
#ts-sidebar .ts-sidebar-panel{
  background: transparent;
  border: 0;
  box-shadow: none;

  padding: 14px;
}

/* Disable the .ts-panel inner stroke for sidebar panels (avoid nested borders). */
#ts-sidebar .ts-sidebar-panel::after{
  display: none;
}

/* Title block divider. */
#ts-sidebar .ts-sidebar-inner > .ts-sidebar-panel:first-child{
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(58, 70, 81, 0.42);

  flex: 0 0 var(--ts-side-title-h);
  max-height: var(--ts-side-title-h);
  overflow: hidden;
}

/* Controls stack block. */
#ts-sidebar .ts-sidebar-inner > .ts-sidebar-panel + .ts-sidebar-panel{
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 14px;
}

#ts-sidebar .ts-sidebar-title{
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.80);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.88);
  margin: 0;
}

#ts-sidebar .ts-sidebar-hint{
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.25;
  color: rgba(255,255,255,0.62);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.88);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
  max-height: 42px;
}

#ts-sidebar .ts-sidebar-controls{
  display: flex;
  flex-direction: column;
  /* Section separation is handled by dividers, not boxed frames. */
  gap: 0;

  /* Let the section stack fill the full sidebar height. */
  flex: 1 1 auto;
  min-height: 0;

  overflow: hidden;
}

/* Sidebar sections (controls blocks). */
#ts-sidebar .ts-side-section{
  background: transparent;
  border: 0;
  box-shadow: none;

  /* Vertical rhythm is controlled here; horizontal padding is owned by panel padding. */
  padding: 14px 0;
  min-height: auto;

  display: flex;
  flex-direction: column;
}

/* Thin divider between sections (instead of stacked frames). */
#ts-sidebar .ts-side-section + .ts-side-section{
  border-top: 2px solid rgba(58, 70, 81, 0.35);
}

/* Fixed sidebar section slots: keeps dividers aligned across pages. */
#ts-sidebar .ts-sidebar-controls .ts-side-section{
  min-height: 0;
}

/* Slot 1: STATUS (fixed cockpit block). */
#ts-sidebar .ts-sidebar-controls .ts-side-section:nth-child(1){
  flex: 0 0 var(--ts-side-status-h);
  max-height: var(--ts-side-status-h);
  overflow: hidden;
}

/* Slot 2: CONTROLS (flex + internal scroll). */
#ts-sidebar .ts-sidebar-controls .ts-side-section:nth-child(2){
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Slot 3: NOTES (fixed footer). */
#ts-sidebar .ts-sidebar-controls .ts-side-section:nth-child(3){
  flex: 0 0 var(--ts-side-notes-h);
  max-height: var(--ts-side-notes-h);
  overflow: hidden;
}

#ts-sidebar .ts-side-label{
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.88);

  margin-bottom: 8px;

  border-bottom: 1px solid rgba(58, 70, 81, 0.40);
  padding-bottom: 6px;
}

#ts-sidebar .ts-side-content{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Default sidebar text blocks (STATUS/CONTROLS/NOTES lists). */
#ts-sidebar .ts-subbar-stats{
  /* Cockpit-like status text: compact, readable, high contrast. */
  font-size: 19px;
  line-height: 1.18;
  color: rgba(255,255,255,0.78);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.88);
}

#ts-sidebar .ts-subbar-stats > div{
  padding: 2px 0;
}

/* If a status value is intentionally emphasized in markup, tint it like a HUD. */
#ts-sidebar .ts-subbar-stats strong,
#ts-sidebar .ts-subbar-stats b{
  color: rgba(84, 220, 130, 0.92);
  font-weight: 400;
}

/* Optional warning tint (used only when a feature assigns the class). */
#ts-sidebar .ts-subbar-stats .ts-hud-warn,
#ts-sidebar .ts-subbar-stats .ts-hud-alert{
  color: rgba(240, 91, 41, 0.95);
}

/* Sidebar action buttons (used for contextual commands like WEEKLY back). */
#ts-sidebar .ts-side-action{
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.22)
    );
  background-color: rgba(12, 16, 20, 0.98);

  border: 2px solid rgba(0,0,0,0.92);
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.55) inset,
    0 6px 0 rgba(0,0,0,0.55);

  color: rgba(255,255,255,0.88);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;

  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

#ts-sidebar .ts-side-action:hover{
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.55) inset,
    0 0 0 3px rgba(240, 91, 41, 0.35) inset,
    0 6px 0 rgba(0,0,0,0.55);
}

#ts-sidebar .ts-side-action:active{
  transform: translateY(1px);
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.55) inset,
    0 0 0 3px rgba(240, 91, 41, 0.35) inset,
    0 5px 0 rgba(0,0,0,0.55);
}

#ts-sidebar .ts-side-action:focus-visible{
  outline: 3px solid rgba(240, 91, 41, 0.95);
  outline-offset: 2px;
}

/* Inputs & selects inside the sidebar should always match the skin. */
#ts-sidebar input[type="text"],
#ts-sidebar input[type="search"],
#ts-sidebar select{
  width: 100%;
  height: 48px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.22)
    );
  background-color: rgba(12, 16, 20, 0.98);

  border: 2px solid rgba(0,0,0,0.92);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 0 2px rgba(58, 70, 81, 0.55) inset;

  color: rgba(255,255,255,0.85);
  font-size: 19px;

  padding: 0 12px;

  outline: none;
}

#ts-sidebar input[type="text"]::placeholder,
#ts-sidebar input[type="search"]::placeholder{
  color: rgba(255,255,255,0.45);
}

#ts-sidebar input[type="text"]:focus,
#ts-sidebar input[type="search"]:focus,
#ts-sidebar select:focus{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 0 2px rgba(58, 70, 81, 0.55) inset,
    0 0 0 3px rgba(240, 91, 41, 0.45) inset;
}

#ts-sidebar input[type="text"]:focus-visible,
#ts-sidebar input[type="search"]:focus-visible,
#ts-sidebar select:focus-visible{
  outline: 3px solid rgba(240, 91, 41, 0.95);
  outline-offset: 2px;
}

/* IMPORTANT: Shinydex adds its own select styling; force it to match the sidebar skin. */
#ts-sidebar .shinydex-root select{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.22)
    ) !important;
  background-color: rgba(12, 16, 20, 0.98) !important;
  border: 2px solid rgba(0,0,0,0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 0 2px rgba(58, 70, 81, 0.55) inset !important;
  color: rgba(255,255,255,0.85) !important;
}

/* -----------------------------------------------------
   COLLECTION MODE (HIDE CHROME)
----------------------------------------------------- */

#ts-collection-toggle{
  position: fixed;
  left: 18px;
  top: 28px;
  z-index: 4500;

  appearance: none;
  border: 3px solid rgba(0, 0, 0, 0.90);
  border-radius: 0;
  color: var(--text-main);
  font-size: 14px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.90);

  padding: 10px 12px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.10),
      rgba(0,0,0,0.20)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 7px
    );

  cursor: pointer;
  user-select: none;

  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.85) inset,
    0 0 0 3px rgba(240, 91, 41, 0.16) inset,
    0 7px 0 rgba(0,0,0,0.75);
}

#ts-collection-toggle:hover{
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.85) inset,
    0 0 0 3px rgba(240, 91, 41, 0.42) inset,
    0 7px 0 rgba(0,0,0,0.75);
}

#ts-collection-toggle:active{
  transform: translateY(1px);
  box-shadow:
    0 0 0 2px rgba(58, 70, 81, 0.85) inset,
    0 0 0 3px rgba(240, 91, 41, 0.42) inset,
    0 6px 0 rgba(0,0,0,0.75);
}

#ts-collection-toggle:focus-visible{
  outline: 3px solid rgba(240, 91, 41, 0.95);
  outline-offset: 2px;
}

body.ts-collection-mode{
  --ts-header-h: 0px;
}

body.ts-collection-mode #ts-header{
  max-height: 0px;
  padding: 0;
  overflow: hidden;
  transform: translateY(-12px);
}

body.ts-collection-mode #ts-shell{
  --ts-sidebar-w: 0px;
}

body.ts-collection-mode #ts-sidebar{
  pointer-events: none;
  transform: translateX(-14px);
  max-height: 0px;
}