/* ArenaSweats Pages entry points on the leaderboard site: the Pages box in the top-left
   controls (pages-entry.js), Look up (pages-pick.js), and the popup buttons and tooltip hints (pages-links.js).
   Built from the site's own pieces: the search box panel, .search-btn, the Region button and the autocomplete list.
   Runs in the League client iframe (Chromium 108): plain colours only, no color-mix(), no nesting. */

/* ---------- the Pages mark ---------- */

/* The brand word, in one place: rename it here (templates/pages-mark.html and pages-links.js PAGES_MARK draw the rest). */
.pages-mark-word::before {
  content: "PAGES";
}

.pages-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.pages-mark-logo {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.pages-mark .logo-arena {
  font-size: 20px;
  letter-spacing: 0.5px;
}

.pages-mark .logo-sweats {
  font-size: 17px;
  letter-spacing: 0.3px;
  animation: none;
  -webkit-text-stroke: 0.5px rgba(166, 75, 68, 0.8);
}

/* Like the "SEASON" of the season subtitle under the main logo. */
.pages-mark-word {
  margin-top: 3px;
  padding-left: 0.62em; /* balances the letter spacing after the last letter */
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.62em;
}

/* ---------- the top-left controls: Region and Season, with the Pages box beside them ---------- */

.top-left-controls.pages-control-layout {
  display: grid;
  grid-template-columns: max-content 340px;
  grid-template-rows: auto auto;
  gap: 14px 12px;
  justify-items: start;
}

.pages-control-layout > .region-selector {
  grid-column: 1;
  grid-row: 1;
}

.pages-control-layout > .season-selector {
  grid-column: 1;
  grid-row: 2;
}

.pages-control-layout > .pages-entry {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  justify-self: stretch;
}

/* The search box's panel (.search-container) at the Region button's size. Not .search-container itself: the site's
   scripts find the player search as the first ".search-container form". */
.pages-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "brand brand" "pick form";
  align-items: center;
  gap: 5px 10px;
  box-sizing: border-box;
  padding: 6px 8px 7px 10px;
  background: var(--semi-transparent-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 8px var(--shadow-color);
  transition: border-color 0.3s ease;
}

.pages-entry:hover {
  border-color: var(--primary-color);
}

.pages-entry-brand {
  grid-area: brand;
  justify-self: center;
  padding: 2px 0;
  text-decoration: none;
}

.pages-entry .pages-mark .logo-arena {
  font-size: 23px;
}

.pages-entry .pages-mark .logo-sweats {
  font-size: 19.5px;
}

.pages-entry .pages-mark-word {
  font-size: 10px;
}

.pages-entry-brand:hover .pages-mark-word {
  color: var(--primary-color);
}

.pages-entry a:focus-visible,
.pages-entry button:focus-visible,
.pages-inline button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.pages-entry > .pages-pick-btn {
  grid-area: pick;
}

.pages-entry-toggle,
.pages-entry-close {
  display: none;
}

.pages-entry-form {
  grid-area: form;
  position: relative;
  display: flex;
  gap: 0;
  min-width: 0;
}

.pages-entry-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  padding: 8px 10px;
  font-size: 0.72rem;
}

.pages-entry .search-btn {
  padding: 8px 14px;
  font-size: 0.75rem;
}

/* Suggestions: the player search's autocomplete list (.autocomplete-dropdown in tooltips-modals.css). Its own class,
   because the site's scripts look up the player search's list as the first ".autocomplete-dropdown". */
.pages-entry-list {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 60;
  width: max(100%, 340px);
  max-height: 420px;
  overflow-y: auto;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--highlight-color);
  border-radius: 6px;
  box-shadow: 0 5px 15px var(--shadow-color);
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-color) rgb(30, 30, 30);
}

.pages-entry-list[hidden] {
  display: none;
}

.pages-entry-list::-webkit-scrollbar {
  width: 6px;
}

.pages-entry-list::-webkit-scrollbar-track {
  background: rgb(30, 30, 30);
}

.pages-entry-list::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 3px;
}

.pages-entry-option {
  padding: 9px 15px;
  font-size: 0.85rem;
  text-decoration: none;
}

.pages-entry-option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pages-entry-option .rank-hint {
  flex-shrink: 0;
  margin-left: 12px;
  white-space: nowrap;
}

.pages-entry-option img.pages-entry-journey-icon {
  box-sizing: border-box;
  padding: 4px;
  background: var(--semi-transparent-bg);
}

.pages-entry-note {
  margin: 0;
  padding: 12px 15px;
  color: rgba(240, 240, 240, 0.75);
  font-size: 0.8rem;
}

/* ---------- Look up button (box and narrow search row) ---------- */

/* The Region button's look, with the gold of a selected value when on. */
.pages-pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  background: var(--semi-transparent-bg);
  border: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: 0 3px 8px var(--shadow-color);
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pages-pick-btn:hover {
  border-color: var(--primary-color);
  box-shadow: 0 5px 15px var(--highlight-color);
}

.pages-pick-icon {
  width: 15px;
  height: 15px;
  color: var(--primary-color);
}

.pages-pick-btn[aria-pressed="true"] {
  background: rgba(215, 168, 78, 0.2);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color), 0 5px 15px var(--highlight-color);
  color: var(--primary-color);
  font-weight: 600;
}

/* ---------- narrow screens: Pages and Look up in the player search row ---------- */

.pages-inline {
  display: none;
}

.pages-inline-open {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: var(--semi-transparent-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 8px var(--shadow-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pages-inline-open:hover,
.pages-inline-open[aria-expanded="true"] {
  border-color: var(--primary-color);
  box-shadow: 0 5px 15px var(--highlight-color);
}

/* ---------- layouts by width (pages-entry.js LAYOUT_QUERIES uses the same breakpoints) ---------- */

/* Less room beside Region and Season before the main logo: a slimmer box and field. */
@media (max-width: 1599px) {
  .top-left-controls.pages-control-layout {
    grid-template-columns: max-content 300px;
  }

  .pages-entry-form input[type="text"] {
    padding: 8px;
    font-size: 0.68rem;
  }

  .pages-entry .pages-entry-form .search-btn {
    padding: 8px 12px;
  }
}

/* Compact: the brand across the box, with Look up and a search button under it; the field opens under the box. */
@media (max-width: 1439px) {
  .top-left-controls.pages-control-layout {
    grid-template-columns: max-content 172px;
  }

  .pages-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand brand" "pick toggle";
    gap: 6px 8px;
    padding: 6px 8px 7px;
  }


  .pages-entry > .pages-pick-btn {
    justify-self: stretch;
  }

  .pages-entry-toggle {
    grid-area: toggle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
  }

  .pages-entry-toggle svg {
    width: 16px;
    height: 16px;
  }

  .pages-entry-toggle[aria-expanded="true"] {
    box-shadow: 0 0 0 1px var(--primary-color);
  }

  .pages-entry-form {
    display: none;
  }

  .pages-entry.is-open .pages-entry-form {
    position: absolute;
    top: calc(100% + 5px);
    left: -1px;
    z-index: 60;
    display: flex;
    width: 340px;
    box-sizing: border-box;
    padding: 8px;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--highlight-color);
    border-radius: 6px;
    box-shadow: 0 5px 15px var(--shadow-color);
  }

  .pages-entry.is-open .pages-entry-form input[type="text"] {
    padding: 9px 10px;
    font-size: 0.8rem;
  }

  .pages-entry.is-open .pages-entry-list {
    top: calc(100% + 5px);
    left: -1px;
    width: 340px;
  }
}

/* Narrow: no room beside Region and Season, so the player search row gets Pages and Look up buttons, and Pages opens
   the box as a panel over the header, drawn at full size although the header is scaled down. */
@media (max-width: 1100px) {
  .top-left-controls.pages-control-layout {
    grid-template-columns: max-content;
  }

  .pages-control-layout > .pages-entry {
    display: none;
  }

  .pages-control-layout > .pages-entry.is-open {
    grid-area: auto; /* placed in a grid area, it would sit beside Region instead of over the controls */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    display: grid;
    grid-template-areas: "brand close" "form form";
    gap: 10px;
    width: min(440px, calc(100vw - 20px));
    padding: 10px 10px 12px 12px;
    transform-origin: top left;
    background: rgba(30, 30, 30, 0.97);
    border: 1px solid var(--highlight-color);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  }

  :root[data-container-scaled] .pages-control-layout > .pages-entry.is-open {
    transform: scale(var(--container-scale-inverse));
  }

  .pages-entry.is-open .pages-mark .logo-arena {
    font-size: 22px;
  }

  .pages-entry.is-open .pages-mark .logo-sweats {
    font-size: 19px;
  }

  .pages-entry.is-open .pages-mark-word {
    font-size: 10px;
  }

  .pages-entry.is-open > .pages-pick-btn,
  .pages-entry.is-open > .pages-entry-toggle {
    display: none;
  }

  .pages-entry.is-open > .pages-entry-close {
    grid-area: close;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--semi-transparent-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }

  .pages-entry.is-open .pages-entry-form {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .pages-entry.is-open .pages-entry-form input[type="text"] {
    padding: 10px 12px;
    font-size: 16px; /* 16px keeps iOS from zooming into the field */
  }

  .pages-entry.is-open .pages-entry-form .search-btn {
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .pages-entry.is-open .pages-entry-list {
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 60vh;
  }

  .pages-entry.is-open .pages-entry-option {
    padding: 10px 14px;
    font-size: 0.95rem;
  }

  .search-container form {
    --pages-inline-width: 276px;
  }

  .pages-inline {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    gap: 8px;
    width: var(--pages-inline-width);
    margin-left: 10px;
  }

  .pages-inline-open {
    flex: 1 1 auto;
    justify-content: center;
  }

  .pages-inline .pages-pick-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .pages-inline .pages-pick-icon {
    width: 17px;
    height: 17px;
  }

  /* The player suggestions keep to the player field, left of the Search button and these buttons. */
  .search-container form > .autocomplete-dropdown {
    width: calc(100% - 110px - 10px - var(--pages-inline-width));
  }
}

/* ---------- Look up mode ---------- */

body.pages-pick-active .pages-pick-target {
  cursor: pointer !important;
}

/* The box around what the pointer means: an outline only, no label. */
.pages-pick-box {
  position: fixed;
  z-index: 2147483000;
  border: 2px solid rgba(215, 168, 78, 0.85);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.pages-pick-box[hidden],
.pages-pick-bar[hidden],
.pages-pick-toast[hidden] {
  display: none;
}

/* The instruction bar, small, at the top of the screen. */
.pages-pick-bar {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 2147483001;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  margin: 0;
  padding: 4px 4px 4px 12px;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 5px 15px var(--shadow-color);
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  cursor: default;
}

/* Phones: at the top it would cover the Look up button in the search row, so it sits at the bottom. */
@media (max-width: 600px) {
  .pages-pick-bar {
    top: auto;
    bottom: 12px;
  }
}

.pages-pick-bar .search-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 11px;
}

/* "Nothing to look up here", briefly, by the pointer. */
.pages-pick-toast {
  position: fixed;
  z-index: 2147483002;
  margin: 0;
  padding: 5px 10px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--shadow-color);
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- first-time hint: the profile popup's "Try the expanded view" callout ---------- */

.pages-pick-hint {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 210;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  width: 270px;
  box-sizing: border-box;
  padding: 3px 3px 3px 4px;
  background: #1c1a17;
  border: 1px solid rgba(215, 168, 78, 0.75);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  animation: pages-pick-hint-in 0.25s ease-out;
}

:root[data-container-scaled] .pages-inline .pages-pick-hint {
  transform-origin: top right;
  transform: scale(var(--container-scale-inverse));
}

/* The arrow points at the Look up button (pages-pick.js sets --pages-hint-arrow). */
.pages-pick-hint::before {
  content: "";
  position: absolute;
  top: -6px;
  right: var(--pages-hint-arrow, 34px);
  width: 9px;
  height: 9px;
  background: #1c1a17;
  border-top: 1px solid rgba(215, 168, 78, 0.75);
  border-left: 1px solid rgba(215, 168, 78, 0.75);
  transform: rotate(45deg);
}

.pages-pick-hint-try,
.pages-pick-hint-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.pages-pick-hint-try {
  padding: 5px 8px;
  color: var(--primary-color);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.35;
  text-align: left;
}

.pages-pick-hint-try:hover {
  text-decoration: underline;
}

.pages-pick-hint-dismiss {
  padding: 2px 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  line-height: 1;
}

.pages-pick-hint-dismiss:hover {
  color: var(--text-color);
}

@keyframes pages-pick-hint-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- popup corner buttons: Look up and "View on ArenaSweats Pages" (pages-links.js) ---------- */

/* Left of the expand and close buttons, and drawn like them (profiles/profile-page-view.css): bare glyph, text
   colour, gold on hover; the glyph moves a little on hover and shrinks a little when pressed. */
.pages-corner-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
}

.pages-corner-btn:hover,
.pages-corner-lookup[aria-pressed="true"] {
  color: var(--primary-color);
}

.pages-corner-btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 0;
}

.pages-corner-btn svg {
  width: 15px;
  height: 15px;
  overflow: visible;
  transition: transform 0.1s ease-out;
}

.pages-corner-btn:active svg {
  transform: scale(0.85);
}

/* Hovering grows the glyph to the size of the hovered expand and close glyphs (profiles/profile-page-view.css) */
.pages-corner-glyph {
  transform-origin: 12px 12px;
  transition: transform 0.18s ease-out;
}

.pages-corner-btn:hover .pages-corner-glyph {
  transform: scale(1.3125);
}

/* Hovering, the hand lifts to point and the book's pages open further */
.pages-corner-hand,
.pages-corner-page {
  transition: transform 0.18s ease-out;
}

.pages-corner-hand {
  transform-origin: 12px 21px;
}

.pages-corner-lookup:hover .pages-corner-hand {
  transform: translateY(-2px) rotate(-8deg);
}

.pages-corner-page {
  transform-origin: 12px 19.5px;
}

.pages-corner-link:hover .pages-corner-page--left {
  transform: rotate(-9deg);
}

.pages-corner-link:hover .pages-corner-page--right {
  transform: rotate(9deg);
}

@media (prefers-reduced-motion: reduce) {
  .pages-corner-btn svg,
  .pages-corner-glyph,
  .pages-corner-hand,
  .pages-corner-page {
    transition: none;
  }
}

/* ---------- popup tooltips: augment and item icons open their page ---------- */

.pages-linked-icon {
  cursor: pointer;
}

.pages-linked-icon:hover {
  outline: 1px solid rgba(215, 168, 78, 0.85);
  outline-offset: 1px;
}

.pages-tooltip-hint {
  display: block;
  margin-top: 4px;
  color: var(--primary-color);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}