/* The student profile page (/profile/). Page-local styles only: everything
   structural, every colour and every control comes from tokens.css and
   site.css. The personalization card, its accent rule and the two picker
   dialogs below are moved here whole from /verify/verify.css, which used to
   carry them under a vf- prefix; this page renames every one of them pf-,
   a page-local rename with nothing outside this file depending on the old
   names. */

.pf-main { padding-block: clamp(var(--tud-space-10), 6vw, 80px) clamp(var(--tud-space-16), 9vw, 112px); }

/* ---------- states ---------- */

/* One state is on screen at a time, so nothing here is ever a card inside a
   card: the signed-out door and the offline retry are cards in their own
   right, and the personalize card is the page once a session is confirmed. */
.pf-state--narrow { width: min(100%, 560px); margin-inline: auto; }
.pf-waiting { color: var(--tud-color-text-muted); font-size: 18px; text-align: center; }

.pf-title {
  max-width: 18ch;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.038em;
}
.pf-title:focus-visible { outline: none; }

.pf-body {
  max-width: 52ch;
  margin-top: var(--tud-space-4);
  color: var(--tud-color-text-secondary);
  font-size: 17px;
  line-height: 1.55;
}

.pf-fine { margin-top: var(--tud-space-4); }

.pf-card {
  padding: clamp(var(--tud-space-6), 5vw, var(--tud-space-10));
  text-align: center;
}
.pf-card .pf-title,
.pf-card .pf-body { margin-inline: auto; }
.pf-card .btn { margin-top: var(--tud-space-6); }

.pf-unavailable {
  width: min(100%, 560px);
  margin: 0 auto;
  color: var(--tud-color-text-secondary);
  text-align: center;
}

/* ---------- self-facing profile personalization ---------- */

.pf-personalize {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: var(--tud-space-5);
  overflow: hidden;
  border: var(--tud-border-default) solid var(--tud-color-border-default);
  border-radius: var(--tud-radius-lg);
  background: var(--tud-color-bg-surface);
  box-shadow: var(--tud-elevation-e1);
}

.pf-personalize-rule { height: 4px; margin: calc(-1 * var(--tud-space-5)) calc(-1 * var(--tud-space-5)) var(--tud-space-5); background: var(--tud-color-deal-panel-0); }
.pf-personalize-rule[data-profile-color="chai-cream"] { background: var(--tud-color-deal-panel-1); }
.pf-personalize-rule[data-profile-color="rickshaw-teal"] { background: var(--tud-color-deal-panel-2); }
.pf-personalize-rule[data-profile-color="kite-pink"] { background: var(--tud-color-deal-panel-3); }
.pf-personalize-rule[data-profile-color="mehndi-green"] { background: var(--tud-color-deal-panel-4); }
.pf-personalize-rule[data-profile-color="mailbox-blue"] { background: var(--tud-color-deal-panel-5); }

.pf-personalize-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--tud-space-5); }
.pf-personalize-heading h1,
.pf-picker h2 { font-family: var(--tud-font-secondary); font-size: 22px; line-height: 1.2; }
#pf-profile-greeting { margin-top: var(--tud-space-1); color: var(--tud-color-text-secondary); }

.pf-avatar {
  display: grid;
  flex: none;
  width: 84px;
  height: 84px;
  place-items: center;
  overflow: hidden;
  border: 4px solid var(--tud-color-deal-panel-0);
  border-radius: var(--tud-radius-pill);
  background: var(--tud-color-deal-panel-0);
  cursor: pointer;
}
.pf-avatar[data-profile-color="chai-cream"], .pf-picker-option[data-profile-color="chai-cream"], .pf-color[data-profile-color="chai-cream"] { background: var(--tud-color-deal-panel-1); }
.pf-avatar[data-profile-color="rickshaw-teal"], .pf-picker-option[data-profile-color="rickshaw-teal"], .pf-color[data-profile-color="rickshaw-teal"] { background: var(--tud-color-deal-panel-2); }
.pf-avatar[data-profile-color="kite-pink"], .pf-picker-option[data-profile-color="kite-pink"], .pf-color[data-profile-color="kite-pink"] { background: var(--tud-color-deal-panel-3); }
.pf-avatar[data-profile-color="mehndi-green"], .pf-picker-option[data-profile-color="mehndi-green"], .pf-color[data-profile-color="mehndi-green"] { background: var(--tud-color-deal-panel-4); }
.pf-avatar[data-profile-color="mailbox-blue"], .pf-picker-option[data-profile-color="mailbox-blue"], .pf-color[data-profile-color="mailbox-blue"] { background: var(--tud-color-deal-panel-5); }
.pf-avatar img { width: 72px; height: 72px; object-fit: contain; }

.pf-nickname { margin-top: var(--tud-space-5); }
.pf-nickname-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tud-space-2); }
.pf-nickname-row input { min-width: 0; }
.pf-nickname .fine { margin-top: var(--tud-space-1); }

.pf-profile-fieldset { margin-top: var(--tud-space-5); padding: 0; border: 0; }
.pf-profile-fieldset legend, .pf-picker > .pf-picker-card > .field-label { margin-bottom: var(--tud-space-2); font-weight: 700; }
.pf-color-row { display: flex; flex-wrap: wrap; gap: var(--tud-space-2); }
.pf-color {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--tud-radius-pill);
  background: var(--tud-color-deal-panel-0);
  cursor: pointer;
}
.pf-color[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--tud-color-text-primary); }

.pf-sticker-shelf {
  display: grid;
  width: 100%;
  gap: var(--tud-space-2);
  margin-top: var(--tud-space-5);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tud-color-text-primary);
  text-align: start;
  cursor: pointer;
}
/* The founder's hidden attribute has to beat display: grid above. */
.pf-sticker-shelf[hidden] { display: none; }
.pf-shelf-title { font-weight: 700; }
.pf-shelf-empty { color: var(--tud-color-text-muted); font-size: 14px; }
.pf-sticker-row { display: flex; gap: var(--tud-space-2); }
.pf-sticker-row img { width: 76px; height: 76px; object-fit: contain; }
#pf-profile-msg { margin-top: var(--tud-space-3); }
.pf-msg--ok:not(:empty) { color: var(--tud-color-status-success-text); background: var(--tud-color-status-success-bg); }

.pf-picker {
  width: min(calc(100% - 32px), 720px);
  max-height: min(88vh, 820px);
  padding: 0;
  overflow: auto;
  border: var(--tud-border-default) solid var(--tud-color-border-strong);
  border-radius: var(--tud-radius-xl);
  background: var(--tud-color-bg-canvas);
  color: var(--tud-color-text-primary);
  box-shadow: var(--tud-elevation-e3);
}
.pf-picker::backdrop { background: color-mix(in srgb, var(--tud-color-bg-inverse) 56%, transparent); }
.pf-picker-card { padding: var(--tud-space-5); }
.pf-picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tud-space-4); margin-bottom: var(--tud-space-5); }
.pf-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tud-space-3); margin-bottom: var(--tud-space-5); }
.pf-picker-option {
  display: grid;
  min-height: 116px;
  place-items: center;
  padding: var(--tud-space-2);
  border: var(--tud-border-default) solid transparent;
  border-radius: var(--tud-radius-md);
  background: var(--tud-color-deal-panel-0);
  cursor: pointer;
}
.pf-picker-option[aria-pressed="true"] { border-color: var(--tud-color-text-primary); box-shadow: 0 0 0 2px var(--tud-color-text-primary); }
.pf-picker-option img { width: min(100%, 96px); height: 96px; object-fit: contain; }
.pf-sticker-option { background: var(--tud-color-bg-sunken); }
.pf-sticker-option:disabled { opacity: .45; cursor: not-allowed; }

[data-theme="dark"] .pf-avatar img,
[data-theme="dark"] .pf-picker-option:not(.pf-sticker-option) img { filter: invert(47%) sepia(96%) saturate(2858%) hue-rotate(345deg) brightness(105%) contrast(101%); }

/* ---------- refer friends ---------- */

/* The same shell as the personalize card above it, so the page reads as two
   sections of one account rather than a second product bolted on. Everything
   inside it counts this one student's own friends; nothing here is ever a
   platform number. The one expressive moment is the prize track: an ink rail
   in three equal legs, one per prize pool, filled in the site's orange. */
.rf-card {
  width: min(100%, 760px);
  margin: var(--tud-space-6) auto 0;
  padding: var(--tud-space-5);
  border: var(--tud-border-default) solid var(--tud-color-border-default);
  border-radius: var(--tud-radius-lg);
  background: var(--tud-color-bg-surface);
  box-shadow: var(--tud-elevation-e1);
  scroll-margin-top: var(--tud-space-8);
}

.rf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tud-space-5); }
.rf-title { font-family: var(--tud-font-secondary); font-size: 22px; line-height: 1.2; }
.rf-title:focus-visible { outline: none; }
.rf-intro { max-width: 46ch; margin-top: var(--tud-space-2); color: var(--tud-color-text-secondary); line-height: 1.5; }
.rf-art { display: block; flex: none; width: 104px; margin-top: calc(-1 * var(--tud-space-2)); }
.rf-art img { display: block; width: 100%; height: auto; }

.rf-waiting { margin-top: var(--tud-space-5); color: var(--tud-color-text-muted); }
.rf-error { display: grid; justify-items: start; gap: var(--tud-space-3); margin-top: var(--tud-space-5); }

.rf-link { margin-top: var(--tud-space-5); }
.rf-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--tud-space-2);
  margin-top: var(--tud-space-2);
}
.rf-link-row input { min-width: 0; min-height: 44px; padding-block: 9px; }
.rf-copy-status { min-height: 19px; margin-top: var(--tud-space-2); }
.rf-copy-status.is-ok { color: var(--tud-color-status-success-text); font-weight: 700; }

.rf-score { margin-top: var(--tud-space-4); }
.rf-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tud-space-1) var(--tud-space-3); }
.rf-count-value {
  color: var(--site-accent-text);
  font-size: clamp(56px, 9vw, 72px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.rf-count-label { font-size: 18px; font-weight: 800; }
.rf-pending { margin-top: var(--tud-space-2); color: var(--tud-color-text-secondary); font-size: 15px; }
.rf-pending:empty { display: none; }

.rf-draw {
  margin-top: var(--tud-space-6);
  padding-top: var(--tud-space-5);
  border-top: var(--tud-border-hairline) solid var(--tud-color-border-default);
}
.rf-draw-title { font-size: 16px; font-weight: 800; line-height: 1.3; }

.rf-track {
  position: relative;
  height: 14px;
  margin: var(--tud-space-5) 7px 0 0;
  border: var(--tud-border-default) solid var(--tud-color-text-primary);
  border-radius: var(--tud-radius-pill);
  background: var(--tud-color-bg-sunken);
}
.rf-track-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tud-color-accent-base);
  transform: scaleX(var(--rf-fill, 0));
  transform-origin: left center;
}
/* One stop per prize pool, sitting on the rail at the end of its leg. */
.rf-stop {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: var(--tud-border-default) solid var(--tud-color-text-primary);
  border-radius: var(--tud-radius-pill);
  background: var(--tud-color-bg-surface);
}
.rf-stop.is-reached { background: var(--tud-color-accent-base); }
.rf-stop.is-reached::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--tud-color-text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rf-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tud-space-2);
  margin: var(--tud-space-3) 0 0;
  padding: 0;
  list-style: none;
}
.rf-tier { display: grid; align-content: start; gap: 2px; text-align: right; }
.rf-tier-at { font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rf-tier-prize { font-size: 14px; font-weight: 700; line-height: 1.3; }
.rf-tier-meta { color: var(--tud-color-text-muted); font-size: 13px; line-height: 1.35; }
.rf-tier.is-reached .rf-tier-at { color: var(--site-accent-text); }

.rf-next { margin-top: var(--tud-space-4); font-weight: 700; }
.rf-next .rf-entries { display: block; margin-top: 2px; color: var(--tud-color-text-secondary); font-weight: 500; }

.rf-close {
  margin-top: var(--tud-space-5);
  padding: var(--tud-space-4);
  border-radius: var(--tud-radius-md);
  background: var(--tud-color-bg-sunken);
}
.rf-close-date { font-family: var(--tud-font-secondary); font-size: 17px; font-weight: 700; }
.rf-close .fine { margin-top: var(--tud-space-1); color: var(--tud-color-text-secondary); }
.rf-rules { display: inline-block; margin-top: var(--tud-space-3); font-weight: 800; }

@media (prefers-reduced-motion: no-preference) {
  .rf-track-fill { transition: transform var(--tud-duration-deliberate) var(--tud-ease-decelerate); }
}

@media (max-width: 560px) {
  .rf-card { margin-top: var(--tud-space-5); }
  .rf-art { width: 72px; }
  .rf-link-row { grid-template-columns: 1fr 1fr; }
  .rf-link-row input { grid-column: 1 / -1; }
  .rf-link-row .btn { width: 100%; }
  .rf-tier-prize { font-size: 13px; }
}

@media (max-width: 560px) {
  .pf-main { padding-block: var(--tud-space-8) var(--tud-space-12); }
  .pf-title { font-size: clamp(28px, 8.6vw, 34px); }
  .pf-card { padding: var(--tud-space-6) var(--tud-space-5); }
  .pf-personalize-heading { align-items: flex-start; }
  .pf-nickname-row { grid-template-columns: 1fr; }
  .pf-nickname-row .btn { width: 100%; }
  .pf-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-picker, .pf-picker::backdrop { scroll-behavior: auto; }
}