/* ===========================================================================
   profile.css - the strip of the top bar that is about YOU.

   On the right end of the top bar sits one button: your picture and your name
   once you are logged in, or "Sign in" before that. Everything that belongs
   to your account - logging in, the instance presets, logging out - happens in
   the little panel that unfolds from it. Nothing of this lives on its own
   page, so you never lose sight of what you were looking at.
   =========================================================================== */

.prof { position: relative; }

/* ---------------------------------------------------------- the button ---- */
.prof-btn {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 12px 0 5px;
  border: 1px solid var(--hair); border-radius: 17px;
  background: rgba(0, 0, 0, .35);
  color: var(--ink-soft);
  font: 12.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  max-width: 210px;
}
.prof-btn:hover { color: #fff; border-color: var(--link); }
.prof.on .prof-btn { border-color: var(--hair); background: rgba(143, 123, 255, .14); }

.prof-av {
  width: 26px; height: 26px; border-radius: 50%;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(143,123,255,.5), rgba(143,123,255,.16));
  border: 1px solid var(--hair);
  color: #fff; font-size: 11px; font-weight: 700;
}
.prof-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-nm {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
/* a small live dot: green while VRChat still accepts the session */
.prof-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto;
  background: #4ad07a; box-shadow: 0 0 7px #4ad07a;
}
.prof.off .prof-dot { display: none; }

/* ---------------------------------------------------------- the panel ----- */
.prof-pop {
  position: absolute; top: calc(100% + 9px); right: 0;
  width: 336px; max-width: calc(100vw - 24px);
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 14, 34, .995), rgba(8, 8, 20, .995));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .62);
  color: var(--ink);
  font: 12.5px "Segoe UI", system-ui, sans-serif;
  text-align: left;
  box-sizing: border-box;
  /* the panel can grow tall (Account / Instance / Settings) - on a short
     window it scrolls itself instead of running off the screen. The cap is on
     the panel's full border box, so its frame stays visible while it scrolls. */
  max-height: calc(100vh - var(--bar-h) - 24px);
  max-height: calc(100dvh - var(--bar-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.prof-pop[hidden] { display: none; }
.prof-pop h4 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.prof-pop p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.5; }
.prof-pop .fine { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.prof-pop label { display: block; margin: 0 0 4px; color: var(--ink-faint); font-size: 11.5px; }
.prof-pop input[type="text"],
.prof-pop input[type="password"] {
  width: 100%; height: 32px; padding: 0 10px; margin: 0 0 10px;
  border: 1px solid var(--hair); border-radius: 8px;
  background: rgba(0, 0, 0, .45); color: var(--ink);
  font: 13px "Segoe UI", system-ui, sans-serif;
}
.prof-pop input:focus { outline: 0; border-color: var(--accent); }
.prof-btnrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

.prof-act {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--hair); border-radius: 8px;
  background: var(--accent-soft); color: #fff;
  font: 12.5px "Segoe UI", system-ui, sans-serif; font-weight: 600;
  cursor: pointer;
}
.prof-act.ghost { background: rgba(255, 255, 255, .04); color: var(--ink-soft); font-weight: 500; }
.prof-act.wide { display: block; width: 100%; margin-bottom: 7px; }
.prof-act:hover { border-color: var(--link); color: #fff; }
.prof-act[disabled] { opacity: .55; cursor: default; }

/* ---------------------------------------- the "sign in first" pop-up ------- */
/* One voice for every action that needs an account. It unfolds from the same
   corner as the panel - the answer always stands next to the way in - and is a
   little narrower than it, because it says one thing. The rose rim is the
   site's own pink, the one the wordmark wears; everything else is the panel's
   language, so it reads as the same piece of furniture. */
.prof-gate {
  position: absolute; top: calc(100% + 9px); right: 0;
  width: 296px; max-width: calc(100vw - 24px);
  padding: 12px 14px 11px;
  border: 1px solid var(--hair);
  border-top: 2px solid #e70069;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 14, 34, .995), rgba(8, 8, 20, .995));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .62);
  color: var(--ink);
  font: 12.5px "Segoe UI", system-ui, sans-serif;
  text-align: left;
  animation: prof-gate-in .16s ease-out;
}
.prof-gate[hidden] { display: none; }
.prof-gate h4 {
  margin: 0 0 7px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.prof-gate p { margin: 0 0 11px; color: var(--ink-soft); line-height: 1.5; }
.prof-gate p b { color: #fff; font-weight: 600; }
.prof-gate .prof-btnrow { margin-top: 0; }
@keyframes prof-gate-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.prof-me { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.prof-me .big {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); background: rgba(143,123,255,.25);
  font-weight: 700; color: #fff; font-size: 15px;
}
.prof-me .big img { width: 100%; height: 100%; object-fit: cover; }
.prof-me .nm { font-size: 14px; font-weight: 600; color: #fff; }
/* your own name in the account tab is a door to your own page - quiet until
   you reach for it, so the panel does not turn into a wall of links */
.prof-me .nm a.prof-nmlink {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .38);
}
.prof-me .nm a.prof-nmlink:hover {
  color: #fff; border-bottom-color: var(--accent);
}
.prof-me .prof-sub { font-size: 11.5px; color: var(--ink-faint); }

.prof-err {
  margin: 0 0 10px; padding: 7px 9px;
  border: 1px solid rgba(255, 90, 120, .45); border-radius: 8px;
  background: rgba(255, 90, 120, .12); color: #ffc4cf;
  font-size: 11.5px; line-height: 1.45;
}
.prof-ok { color: #8ce8a9; font-size: 11.5px; }

/* the settings list --------------------------------------------------------- */
.prof-set { margin: 0 0 12px; padding: 0; border: 0; }
.prof-set legend {
  padding: 0; margin: 0 0 6px; color: var(--ink-faint);
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
}
.prof-set .row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 7px; border-radius: 7px; cursor: pointer;
}
.prof-set .row:hover { background: rgba(255, 255, 255, .05); }
.prof-set .row input { accent-color: var(--accent); margin: 0; }
.prof-set .row b { font-weight: 600; color: var(--ink); }
.prof-set .row i { font-style: normal; color: var(--ink-faint); font-size: 11px; }
.prof-set .row.on b { color: #fff; }
.prof-hr { height: 1px; margin: 12px 0; background: var(--hair-soft); }

/* the three doors of the panel ---------------------------------------------
   Account (who you are), Instance (what happens when you ask for one) and
   Settings (how the site behaves for you). One row of tabs, so the panel
   stays one panel and never grows into a whole page of its own. */
.prof-tabs {
  display: flex; gap: 4px; margin: 0 0 12px;
  padding: 3px; border-radius: 10px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--hair-soft);
}
.prof-tab {
  flex: 1 1 0; height: 26px; padding: 0 6px;
  border: 0; border-radius: 7px; background: none;
  color: var(--ink-faint);
  font: 11.5px "Segoe UI", system-ui, sans-serif; font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
}
.prof-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.prof-tab.on { background: var(--accent-soft); color: #fff; }

/* your picture -------------------------------------------------------------
   The picture the site shows for you sits behind a round frame, with your name
   beside it. There is nothing to change here: your picture belongs to your
   account and is chosen from your name in the top corner. */
.site-face { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.site-face .prof-shot {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(143,123,255,.4), rgba(143,123,255,.12));
  color: #fff; font-size: 17px; font-weight: 700;
}
.site-face .prof-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-face .side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.site-face .prof-who { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.site-face .prof-act { height: 27px; padding: 0 10px; font-size: 11.5px; }
.site-too { color: #ffc4cf; font-size: 11.5px; }
.site-note { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }

/* on a narrow window the top bar would overflow - the button shrinks first */
@media (max-width: 720px) {
  .prof-nm { display: none; }
  .prof-btn { padding: 0 7px; }
}

/* the rank VRChat gave this account, right under the name */
.rankline { display: flex; align-items: center; gap: 5px; }
.rankline .rk { font-weight: 700; }

/* --------------------------------------------------- the companion's circle --
   Signing in with the companion asks VRChat three or four times, and one of
   those asks the visitor's own status line to carry a rune for a moment. That
   is not instant, and a panel that sits still while it happens looks stuck. So
   the work is drawn: a ring turning, six arcs filling in as the steps land, and
   a line of plain speech under it saying which step this is. The circle is
   decoration with a job: its arcs are the steps, and the last one closing is
   the only "you are signed in" a visitor needs to read. */

.prof-magic {
  display: block; margin: 2px 0 14px; text-align: center;
}
.prof-magic .mg-svg { display: block; width: 92px; height: 92px; margin: 0 auto 10px; }
.prof-magic .mg-svg svg { width: 100%; height: 100%; overflow: visible; }

.mg-ring, .mg-ring2 {
  fill: none; stroke: var(--hair); stroke-width: 1;
  transform-origin: 48px 48px;
}
.mg-ring { stroke-dasharray: 3 7; animation: mg-turn 26s linear infinite; }
.mg-ring2 { stroke-dasharray: 1 9; opacity: .7; animation: mg-turn 17s linear infinite reverse; }
.mg-web { stroke: #8f7bff; stroke-width: .8; opacity: .28; }
.mg-hex {
  fill: none; stroke: var(--link); stroke-width: 1.1; opacity: .55;
  transform-origin: 48px 48px; animation: mg-turn 40s linear infinite reverse;
}
.mg-arc {
  fill: none; stroke: var(--hair); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 40 200;
  /* No transform-origin here on purpose. Each arc carries its own
     `transform="rotate(N 48 48)"`, and a transform-origin in CSS composes with
     that attribute rather than replacing it: the arcs were flung out to radii
     of 36, 101, 148, 158, 127 and 66 instead of all sitting on 38, which read
     as a ring that did not share the star's centre. */
  transition: stroke .45s ease;
}
.mg-arc.on { stroke: #a58bff; filter: drop-shadow(0 0 3px rgba(165, 139, 255, .75));
  animation: mg-draw .55s ease-out; }
.mg-arc.on.lit { stroke: #e6dcff; filter: drop-shadow(0 0 6px rgba(201, 179, 255, .95)); }
.mg-core {
  fill: none; stroke: var(--link); stroke-width: 1.6;
  transform-origin: 48px 48px; opacity: 0;
}
.mg-core.open { animation: mg-bloom .9s ease-out forwards; }
.mg-slow .mg-ring, .mg-slow .mg-ring2 { stroke: #b9a2ff; }

.mg-wheel { transform-origin: 48px 48px; }
/* Built, and now it simply turns: the arcs stop being progress and become the finished sigil. */
.prof-magic.done .mg-wheel { animation: mg-turn 26s linear infinite; }
.prof-magic.done .mg-arc { stroke: #c9b3ff; }

.prof-magic .mg-step {
  display: block;
  font: 11px/1.5 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: #a58bff;
}
.prof-magic .mg-when { display: block;
  font: 11.5px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--hair);
  margin-top: 6px; }

/* The log. Every step the sign-in takes, in order, with the one running now marked and the ones
   already done ticked: the work stops being a guess and becomes a list you can watch fill up. */
.prof-magic .mg-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  text-align: left;
}
.prof-magic .mg-item {
  position: relative;
  padding: 3px 0 3px 22px;
  font: 12.5px/1.45 "Segoe UI", system-ui, sans-serif;
  color: var(--hair);
  transition: color .3s ease;
}
.prof-magic .mg-tick {
  position: absolute; left: 4px; top: 6px;
  width: 9px; height: 9px; border-radius: 2px;
  border: 1px solid var(--hair);
  transition: border-color .3s ease, background .3s ease;
}
.prof-magic .mg-item.now { color: #cfc2ff; }
.prof-magic .mg-item.now .mg-tick {
  border-color: #a58bff;
  animation: mg-pulse 1.4s ease-in-out infinite;
}
.prof-magic .mg-item.done { color: var(--ink-soft); }
.prof-magic .mg-item.done .mg-tick {
  border-color: #a58bff; background: #a58bff;
  box-shadow: 0 0 6px rgba(165, 139, 255, .8);
}
.prof-magic.done .mg-item { color: #cfc2ff; }

@keyframes mg-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(165, 139, 255, 0); }
  50% { box-shadow: 0 0 7px rgba(165, 139, 255, .9); }
}

@keyframes mg-turn { to { transform: rotate(360deg); } }
@keyframes mg-draw {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}
@keyframes mg-bloom {
  0% { opacity: 0; transform: scale(.4) rotate(0deg); }
  60% { opacity: .95; }
  100% { opacity: .75; transform: scale(1) rotate(180deg); }
}