/*
 * Settings: the gear, its menu, and the Connections screen.
 *
 * Built to the product's own Connections page rather than to this tool's look, because the
 * point of the screen is that somebody who has connected a Riot or a GGG account recognises
 * it immediately. Two things are copied deliberately from the screenshots: the buttons here
 * are the muted purple of a *secondary* action, not the gold of a primary one — connecting an
 * account is not the page's call to action, it is the page's content — and the rows are one
 * card with hairline dividers instead of separate panels.
 *
 * Colours are the shared grey ramp only — --gray-950 through --gray-100 — and never the
 * semantic aliases (--panel, --line) that some pages declare and others do not. That is what
 * lets the same file style the gear on the main page, on /profile and here.
 */

.gb-gear {
  display: inline-flex; align-items: center; justify-content: center;
  /* 26px, because the header it sits in is 39px tall: a 40px button *was* the header. */
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--gray-600); border-radius: 6px;
  background: var(--gray-800); color: #fff; cursor: pointer;
}
.gb-gear:hover { background: var(--gray-700); }
.gb-gear svg { width: 16px; height: 16px; }
/*
 * The product's gear is a filled glyph, so this one is `fill`, not `stroke` — and it has to be
 * said out loud, because an SVG's default fill is black and this rail is dark.
 */
.gb-gear svg path { fill: currentColor; stroke: none; }

.gb-menu-wrap { position: relative; display: inline-flex; }
.gb-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 220px; padding: 8px;
  background: var(--gray-800); border: 1px solid var(--gray-600); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.gb-menu[hidden] { display: none; }
.gb-menu__label {
  padding: 6px 12px 8px; font-size: 13px; color: var(--gray-200);
}
.gb-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.gb-menu__item:hover, .gb-menu__item.is-active { background: var(--gray-700); }

/* ---------- the Connections screen ---------------------------------------- */

.st-shell { display: flex; gap: 0; align-items: stretch; min-height: calc(100vh - 69px); }
.st-side {
  flex: 0 0 300px; padding: 24px 16px; background: var(--gray-900);
  border-right: 1px solid var(--gray-600);
}
.st-side h2 { margin: 0 0 24px; padding: 0 16px; font-size: 22px; font-weight: 700; color: #fff; }
.st-nav { display: flex; flex-direction: column; }
.st-nav a {
  padding: 14px 16px; font-size: 17px; font-weight: 500; color: var(--gray-200); border-radius: 6px;
}
.st-nav a.is-active { background: var(--gray-800); color: #fff; font-weight: 700; }
.st-main { flex: 1 1 auto; min-width: 0; padding: 24px 32px 64px; }
.st-main h1 { margin: 0 0 32px; font-size: 26px; font-weight: 700; }
.st-main h3 { margin: 0 0 16px; font-size: 19px; font-weight: 700; }

.st-card {
  max-width: 980px;
  background: var(--gray-900); border: 1px solid var(--gray-600); border-radius: 8px;
}
.st-row {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--gray-600);
}
.st-row:last-child { border-bottom: 0; }
.st-row__name { font-size: 17px; font-weight: 700; color: #fff; }
.st-row__sub { margin-top: 4px; font-size: 13px; color: var(--gray-200); }
.st-row__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.st-avatar { width: 32px; height: 32px; border-radius: 50%; }

.st-btn {
  padding: 11px 18px; border: 1px solid var(--gray-600); border-radius: 6px;
  background: var(--gray-700); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.st-btn:hover { background: var(--gray-600); }
.st-btn:disabled { opacity: 0.6; cursor: default; }
/* Disconnecting deletes a library; it gets the danger tint rather than the neutral one. */
.st-btn--danger { color: #ff8a80; border-color: #f0443840; background: #f0443826; }
.st-btn--danger:hover { background: #f0443840; }

.st-note { max-width: 980px; margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--gray-200); }
.st-note b { color: var(--gray-100); }
.st-fixtures { max-width: 980px; margin-top: 32px; }
.st-fixtures .st-row { flex-wrap: wrap; gap: 8px; }

@media (max-width: 860px) {
  .st-shell { flex-direction: column; }
  .st-side { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--gray-600); }
  .st-main { padding: 20px 16px 48px; }
}