/*
  A STUDENT'S PROFILE PAGE (u/) -- the frame around the app's renderer.

  The sidebar and the widgets are drawn by profile-view.js and dressed by
  profile-view.css (byte copies of the app's). The colours are themes.css,
  read out of the app. This file is only the page AROUND them: the theme's
  background, the brand bar, the loading / error card, the footer, and the
  one line this page adds under the sidebar ("Add @x in Friends").

  THE BACKGROUND IS THE APP'S RECIPE. With the art on, body wears the
  theme's --app-background exactly as the app's body does (fixed, so the
  picture never zooms as the page scrolls). With it off ("Colours only" in
  the app) it is the same gradient the app draws from the theme's --accent,
  --accent-2 and --bg -- src/styles/modules/profile-page.css in the app.

  Fonts: Lora is this site's own file (the CSP allows font-src 'self').
*/

@font-face {
  font-family: "Lora";
  src: url("../assets/site/fonts/lora/Lora-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--app-background);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--pv-font, Inter, "Segoe UI", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.5;
}

html[data-bg="off"] body {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--accent-2, var(--accent)) 16%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: var(--accent); }

[hidden] { display: none !important; }

/* ── top ── */
.pp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1228px;
  margin: 0 auto;
  padding: 20px 24px;
}

/* the mark beside the name, as on the front page and account/ */
.pp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: "Lora", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

.pp-brand img { flex: none; border-radius: 8px; }

.pp-get {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--panel-border-strong);
  background: var(--panel-bg);
  color: var(--panel-heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pp-get:hover { border-color: var(--accent); }

/* ── main ── */
.pp-main {
  flex: 1;
  width: 100%;
  max-width: 1228px;
  margin: 0 auto;
  padding: 4px 24px 36px;
}

.pp-state {
  max-width: 34rem;
  margin: 12vh auto 0;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--panel-text);
  font-size: 17px;
  text-align: center;
}

.pv-side .pp-add {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--panel-border);
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)),
    var(--panel-bg);
  color: var(--panel-text);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.pv-side .pp-add b { color: var(--panel-heading); }

/* ── add friend (2026-09-30) ── the block under a visitor's card. */
.pv-side .pp-friend { display: grid; gap: 10px; justify-items: center; }
.pp-friend-form, .pp-friend-status { justify-self: stretch; }
.pp-friend-line, .pp-friend-hint, .pp-friend-status { margin: 0; }
.pp-friend-hint { font-size: 13px; opacity: 0.78; }
.pp-friend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font: 700 15px/1 var(--pv-font, Inter, "Segoe UI", system-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.pp-friend-btn:hover { filter: brightness(1.07); }
.pp-friend-btn:focus-visible { outline: 3px solid var(--panel-heading); outline-offset: 3px; }
.pp-friend-btn:disabled { cursor: default; filter: none; opacity: 0.7; }
.pp-friend[data-mode="done"] > .pp-friend-btn {
  background: transparent;
  color: var(--panel-heading);
  box-shadow: inset 0 0 0 1px var(--panel-border-strong, var(--panel-border));
  opacity: 1;
}
.pp-friend-form { display: grid; gap: 8px; }
.pp-friend-label { font-size: 13px; font-weight: 600; color: var(--panel-heading); text-align: left; }
.pp-friend-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-friend-pass, .pp-friend-who {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border-strong, var(--panel-border));
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--bg));
  color: var(--panel-text);
  font: 15px/1.2 var(--pv-font, Inter, "Segoe UI", system-ui, sans-serif);
}
.pp-friend-pass:focus, .pp-friend-who:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-friend-status { font-size: 14px; font-weight: 600; color: var(--panel-heading); }
.pp-friend-status[data-tone="warn"], .pp-friend-status[data-tone="error"] { color: var(--panel-text); }
.pp-friend-status[data-tone="error"]::before { content: "! "; color: var(--accent); }

/* ── foot ── */
.pp-foot {
  padding: 18px 24px 28px;
  text-align: center;
}

.pp-foot p {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--panel-muted-strong);
  font-size: 13px;
}

.pp-foot a { color: var(--panel-heading); }

@media (max-width: 640px) {
  .pp-top { padding: 16px; }
  .pp-brand { font-size: 21px; }
  .pp-get { padding: 0 14px; font-size: 13px; }
  .pp-main { padding: 0 16px 28px; }
  .pp-foot { padding: 12px 16px 24px; }
  .pp-foot p { border-radius: 16px; }
}

/* ── the friend count (2026-10-17) ── one stat chip under the @username,
   only while the student leaves "Friend count" on in the app. Dressed like
   Selah's stats (.pv-selah-stat in profile-view.css), from the theme's own
   panel tokens, so a light theme and a dark one both read. */
.pv-who .pp-friends {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  padding: 5px 12px 5px 5px;
  border-radius: 12px;
  background: var(--panel-soft-bg);
  color: var(--panel-muted-strong);
  font-size: 14px;
  line-height: 1.2;
}

.pp-friends-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.pp-friends-value {
  color: var(--panel-heading);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The narrow layout puts the avatar beside the name, over the banner's
   lower edge: the chip takes its own row under them, above the bio, so the
   name and @username sit exactly where they did before. */
@container pv-host (max-width: 720px) {
  .pv-who:has(.pp-friends) {
    grid-template-areas: "avatar name" "avatar handle" "friends friends" "bio bio";
  }

  .pv-who .pp-friends {
    grid-area: friends;
    justify-self: start;
    margin-top: 12px;
  }
}