/* ===== App shell =====
   Layout of the client frame around the page content: the section nav,
   window controls, social panel (friend statuses + chat bar), the Contact
   "Add Friend" panel, scrollbars and the page transition. Loaded after
   styles.css, so rules here win over the base styles at equal specificity. */

:root {
  /* Desktop: width of the left nav column the page sits beside.
     Phones: height of the tab row the page sits under. One is always 0. */
  --nav-w: clamp(190px, 13vw, 216px);
  --nav-row-h: 0px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Page-switch offset, scaled by --sec-dir: the nav is a column on desktop,
     so pages arrive vertically; on phones it's a row, so sideways. */
  --sec-dx: 0px;
  --sec-dy: 0.75rem;
}
.app.journal-mode { --nav-w: 0px; --nav-row-h: 0px; }

/* ----- Layout: main column + social panel ----- */
.app-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rightpanel-w);
  height: calc(100vh - var(--topbar-h));
  min-height: 0;
}
/* The scroll area spans the whole main column so page art can run under
   the translucent nav; page content starts to the right of it. */
.main-inner {
  top: var(--nav-row-h);
  padding-left: var(--nav-w);
}
/* About's profile backdrop (splash + shade) bleeds back under the nav, like
   the client's Home splash; its content stays beside the nav. */
.section-anim > .profile {
  margin-left: calc(-1 * var(--nav-w));
  padding-left: var(--nav-w);
}

/* ----- Left nav (client Home screen) -----
   Not a solid panel: a dark vertical gradient over the page, lighter toward
   the bottom so the art shows through, with a hairline on its right edge. */
.leftnav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Above the project detail view (z 20), which runs underneath it. */
  z-index: 25;
  width: var(--nav-w);
  padding: var(--sp-5) 0 var(--sp-4);
  background: linear-gradient(180deg,
    rgba(1, 10, 19, 0.92) 0%,
    rgba(1, 10, 19, 0.8) 38%,
    rgba(1, 10, 19, 0.5) 72%,
    rgba(1, 10, 19, 0.3) 100%);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--gold-text) 16%, transparent);
  animation: fadeIn 200ms ease-out both;
}
.app.journal-mode .leftnav { display: none; }

.navlist {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navitem {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.125rem;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.5rem var(--sp-3) 0.5rem 1.25rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold-bright) 82%, transparent);
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.navitem:hover {
  color: var(--gold-bright);
  background-color: rgba(240, 230, 210, 0.04);
}
.navitem.active { color: var(--gold-bright); }
.navitem:active { color: var(--gold-text); }
.navitem:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -3px;
}

/* Icon slot. The art thumbnail is positioned from it so every label keeps
   the same left edge whether its row shows an icon or art. */
.nav-mark {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
}
.nav-icon {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--gold-text);
  transition: opacity 150ms ease-out;
}
.navitem:hover .nav-icon { color: var(--gold-bright); }

/* Active item: a crop of the page's art in place of the icon, bleeding to
   the column's left edge. Wipes in from that edge; leaves faster. */
.nav-art {
  position: absolute;
  top: 50%;
  left: -1.25rem;
  width: 2.875rem;
  height: 2.875rem;
  margin-top: -1.4375rem;
  background-color: var(--bg-panel);
  background-repeat: no-repeat;
  box-shadow:
    inset -1px 0 0 color-mix(in srgb, var(--gold-text) 45%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.45);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 160ms ease-in;
}
.navitem.active .nav-icon { opacity: 0; }
.navitem.active .nav-art {
  clip-path: inset(0 0 0 0);
  transition: clip-path 380ms var(--ease-out-expo);
}

/* Phone-row underline; the column doesn't use it. */
.nav-ind { display: none; }

/* ----- UW CS Webring (always in the top bar) ----- */
.webring {
  display: flex;
  align-items: center;
  gap: 2px;
}
.webring a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  color: var(--text-2);
  transition: color 150ms ease-out;
}
.webring .wr-arrow { width: 1.25rem; }
.webring .wr-arrow:hover { color: var(--gold-bright); }
.webring .wr-home { padding: 0 2px; }
.webring .wr-icon {
  display: block;
  width: 18px;
  height: auto;
  opacity: 0.7;
  transition: opacity 150ms ease-out;
}
.webring .wr-home:hover .wr-icon { opacity: 1; }
.webring a:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.tb-webring { display: flex; align-items: center; padding: 0 var(--sp-2); }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the column doesn't fit, so the nav becomes a row of tabs above
   the page that scrolls sideways, with a sliding gold underline. */
@media (max-width: 768px) {
  :root {
    --nav-w: 0px;
    --nav-row-h: 2.75rem;
    --sec-dx: 1.25rem;
    --sec-dy: 0px;
  }
  .app.journal-mode { --nav-row-h: 0px; }
  .leftnav {
    position: relative;
    bottom: auto;
    width: auto;
    height: var(--nav-row-h);
    padding: 0;
    display: flex;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--gold-muted);
    box-shadow: none;
  }
  .navlist {
    flex: 1;
    flex-direction: row;
    gap: 0;
    min-width: 0;
    padding: 0 1.75rem 0 var(--sp-2);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Fade the clipped end so it reads as a row that scrolls. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
  }
  .navlist::-webkit-scrollbar { display: none; }
  .navitem {
    flex: none;
    min-height: 0;
    height: 100%;
    padding: 0.125rem 0.75rem 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: var(--text-2);
  }
  .navitem:hover { background-color: transparent; }
  .nav-mark { display: none; }
  .nav-ind {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100px;
    height: 2px;
    transform-origin: 0 0;
    background: linear-gradient(90deg,
      transparent 0,
      var(--gold) 18%,
      var(--gold-text) 50%,
      var(--gold) 82%,
      transparent 100%);
    opacity: 0;
    pointer-events: none;
  }
  .nav-ind.shown { opacity: 1; }
  .nav-ind.animate { transition: transform 420ms var(--ease-out-expo); }
  .tb-webring { padding: 0; }
}

/* ----- Window controls (top-right of the client frame) ----- */
.win-controls {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
}
.win-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: var(--text-2);
  cursor: pointer;
  transition: color 150ms ease-out;
}
.win-btn svg { display: block; }
.win-btn:hover { color: var(--gold); }
.win-btn:active { color: var(--gold-muted); }
.win-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: -3px; }
/* Keep the music toggle clear of the controls above it. */
.tb-profile .rp-profile-icons { align-self: flex-end; margin-bottom: 0.625rem; }
@media (max-width: 768px) {
  .win-controls { display: none; }
}

/* ----- Status colours (client: green online, blue in game) ----- */
.st-online { --st-color: var(--green); }
.st-ingame { --st-color: var(--cyan); }
.st-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-color, var(--green));
}
.rp-status { gap: 0.3125rem; }

/* ----- Social panel ----- */
.rightpanel { position: relative; }
.rp-social-head .iconbtn {
  appearance: none;
  padding: 0;
  background: none;
}
.rp-social-head .iconbtn.active { background: rgba(200, 155, 60, 0.12); }
.rp-social-head .iconbtn:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }

/* Group header: a real toggle now, with a drawn chevron. */
.rp-section-head {
  appearance: none;
  justify-content: flex-start;
  gap: 0.375rem;
  width: 100%;
  margin: 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--text-2);
}
.rp-section-head:hover { color: var(--gold-bright); }
.rp-section-head:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }
.rp-group-chev { transition: transform 200ms var(--ease-out-expo); }
.rp-section-head.open .rp-group-chev { transform: rotate(90deg); }
.rp-group-count { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

.rp-friends {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  gap: 2px;
}
.rp-friends[hidden] { display: none; }
.rp-friend {
  gap: var(--sp-2h);
  padding: 0.375rem var(--sp-3);
}
.rp-friend .av .sd { background: var(--st-color); }
.rp-friend .meta { min-width: 0; }
.rp-friend .meta .nm { font-size: 15px; line-height: 1.25; }
.rp-friend .meta .st {
  margin-top: 1px;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--st-color);
}
.rp-friend:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }

/* ----- Chat bar (bottom of the social panel) ----- */
.rp-chat {
  position: relative;
  flex: none;
  margin-top: auto;
}
.rp-chat-bar {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: 2.5rem;
  margin: 0;
  padding: 0 var(--sp-3);
  background: linear-gradient(180deg, rgba(1, 10, 19, 0.55), var(--bg-deep));
  border: 0;
  border-top: 1px solid var(--divider-strong);
  color: var(--text-2);
  cursor: pointer;
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  transition: color 150ms ease-out, background 150ms ease-out;
}
.rp-chat-bar:hover,
.rp-chat.open .rp-chat-bar { color: var(--gold-bright); }
.rp-chat.open .rp-chat-bar { border-top-color: var(--gold-muted); }
.rp-chat-bar:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }
.rp-chat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rp-chat-count {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.rp-chat-chev {
  transform: rotate(-90deg);
  transition: transform 200ms var(--ease-out-expo);
}
.rp-chat.open .rp-chat-chev { transform: rotate(90deg); }

.rp-chat-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  background: var(--bg-deep);
  border-top: 1px solid var(--gold-muted);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  animation: chatDrawerIn 260ms var(--ease-out-expo) both;
}
@keyframes chatDrawerIn {
  from { opacity: 0; transform: translateY(8px); }
}
.rp-chat-drawer-head {
  padding: var(--sp-2h) var(--sp-3) var(--sp-1);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.rp-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2h);
  padding: var(--sp-1) var(--sp-3) var(--sp-3);
}
.rp-chat-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ----- Contact: client "Add Friend" panel ----- */
.contact-page {
  max-width: none;
  display: flex;
  justify-content: center;
}
.af-panel {
  width: min(100%, 38rem);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--gold-muted);
  border-image: linear-gradient(180deg, var(--gold-text), var(--gold-muted) 40%, var(--divider-strong)) 1;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.af-title {
  margin: 0 0 var(--sp-4);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  line-height: 1.1;
}

.af-riotid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--divider-strong);
}
.af-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  align-self: center; /* middle of the label + ID block beside it */
}
.af-label {
  margin-bottom: 0.375rem;
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.af-id-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
}
/* Reads like the client's Riot ID field: dark inset well, name + tag. */
.af-id {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  height: 2.25rem;
  padding: 0 var(--sp-2h);
  line-height: 2.25rem;
  background: rgba(1, 10, 19, 0.8);
  border: 1px solid var(--divider-strong);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  user-select: all;
  overflow: hidden;
  white-space: nowrap;
}
.af-id-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-bright);
}
.af-id-tag {
  font-size: 14px;
  color: var(--text-2);
}
/* The button itself is HexButton (.hx-btn, css/collection.css). */
.af-copy.hx-btn { min-width: 5.5rem; }
/* One width for the whole action column so the buttons line up. */
.af-action.hx-btn { min-width: 7rem; }
.af-hint {
  margin-top: var(--sp-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
/* stays in the DOM (live region) but takes no room until it has text */
.af-hint:empty { margin: 0; }

.af-group {
  display: flex;
  gap: 0.375rem;
  padding: 0 0 var(--sp-2);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.af-group-count { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.af-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.af-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-2);
  margin: 0 calc(-1 * var(--sp-2));
  border-top: 1px solid var(--divider);
  transition: background 150ms ease-out;
}
.af-row:first-child { border-top: 0; }
.af-row:hover { background: rgba(240, 230, 210, 0.03); }
.af-av {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3a5c, var(--bg-panel));
  border: 1px solid var(--gold-muted);
  color: var(--gold);
}
.af-av .sd {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--st-color);
  border: 2px solid var(--bg-panel);
}
.af-nm {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  line-height: 1.3;
}
.af-handle {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .af-panel { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  .af-title { font-size: 1.25rem; margin-bottom: var(--sp-3); }
  .af-riotid { grid-template-columns: minmax(0, 1fr); }
  .af-icon { display: none; }
  .af-row { gap: var(--sp-2h); }
  .af-action.hx-btn { min-width: 6.5rem; padding: 0 0.75rem; }
}

/* ----- Page switch: the new page arrives from the direction of the nav
   item you moved toward (--sec-dir is 1 or -1, set by App; the axis follows
   the nav, see :root) and settles fast. No end-state transform is left
   behind, so fixed-position children are unaffected once it finishes. ----- */
.section-anim {
  animation: shellSecIn 380ms var(--ease-out-expo) backwards;
}
@keyframes shellSecIn {
  from {
    opacity: 0;
    transform: translate(
      calc(var(--sec-dir, 1) * var(--sec-dx)),
      calc(var(--sec-dir, 1) * var(--sec-dy)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-anim { animation: fadeIn 160ms ease-out backwards; }
  .nav-ind.animate { transition: none; }
  .navitem .nav-art,
  .navitem.active .nav-art { transition: none; }
  .rp-chat-drawer { animation: none; }
}

/* ----- Scrollbars: thin hairline track with a gold thumb, like the client ----- */
.main-inner,
.rp-friends {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-muted) transparent;
}
@supports selector(::-webkit-scrollbar) {
  /* Chrome ignores the ::-webkit-scrollbar styles below while the standard
     properties are set, so hand those back to the pseudo-elements. */
  .main-inner,
  .rp-friends {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
.main-inner::-webkit-scrollbar,
.rp-friends::-webkit-scrollbar { width: 10px; }
.main-inner::-webkit-scrollbar-track,
.rp-friends::-webkit-scrollbar-track {
  background: linear-gradient(90deg,
    transparent 4.5px, var(--divider-strong) 4.5px,
    var(--divider-strong) 5.5px, transparent 5.5px);
}
.main-inner::-webkit-scrollbar-thumb,
.rp-friends::-webkit-scrollbar-thumb {
  background: var(--gold-muted) padding-box;
  border: 3px solid transparent;
  min-height: 2.5rem;
}
.main-inner::-webkit-scrollbar-thumb:hover,
.rp-friends::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }
.main-inner::-webkit-scrollbar-corner,
.rp-friends::-webkit-scrollbar-corner { background: transparent; }

/* ----- Browser surfaces ----- */
::selection {
  background: color-mix(in srgb, var(--gold) 38%, transparent);
  color: var(--gold-bright);
}
input, textarea { caret-color: var(--gold); }

/* Narrow phones: with the webring in the top bar, PLAY, tabs, webring and
   currency ran ~28px past the edge at 390px and clipped the currency "+"
   button. Tighten the bar to fit. */
@media (max-width: 480px) {
  .tb-left { padding-left: 6px; gap: 2px; }
  .play-btn { width: 4.75rem; }
  .tab { padding: 0 4px; }
  .tb-right { gap: 2px; padding-right: 0; }
  .tb-webring .wr-home { padding: 0; }
}

/* ----- Top bar controls: real buttons, visible keyboard focus ----- */
button.tab {
  appearance: none;
  margin: 0;
  background: none;
  border: 0;
}
.tab:focus-visible,
.iconbtn:focus-visible,
.currency-stack > .plus:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}
.tab:focus-visible { outline-offset: -0.75rem; }