/* ============================================================================
   Profile.

   Two containers, one component. Signed out is a small centred card, because
   the only thing on it is one button and a full-height sheet for that would be
   theatre. Signed in is a full page sliding up like the studio, because there
   is genuinely a page of content once somebody has listings.

   Flat throughout — hairlines and surface steps, no shadows.
   ============================================================================ */

.pf {
  position: absolute;
  inset: 0;
  z-index: var(--z-sheet);
}

.pf[hidden] { display: none; }

.pf-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.pf.is-open .pf-backdrop { opacity: 1; }

/* --- signed out: a card --- */

.pf-sheet.is-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(360px, calc(100% - var(--s-8)));
  border: var(--border-hairline);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.pf.is-open .pf-sheet.is-card { opacity: 1; transform: translate(-50%, -50%); }

/* --- signed in: a page --- */

.pf-sheet.is-page {
  position: absolute;
  inset: 0;
  background: var(--c-ground);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.pf.is-open .pf-sheet.is-page { transform: translateY(0); }

.pf-top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-3) 0 var(--s-4);
  border-bottom: var(--border-hairline);
}

.pf-top-title { font-size: var(--t-footnote); font-weight: var(--fw-semibold); color: var(--c-text-muted); }

.pf-x {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-raised);
  color: var(--c-text-muted);
}

.pf-sheet.is-card .pf-top { border-bottom: none; }

.pf-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow-y: auto;
}

/* --- sign in --- */

.pf-signin { display: flex; flex-direction: column; gap: var(--s-3); text-align: center; }
.pf-signin h2 { font-size: var(--t-title-3); font-weight: var(--fw-bold); }
.pf-signin p { font-size: var(--t-subhead); color: var(--c-text-muted); line-height: var(--lh-body); }

.pf-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--tap-min);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  background: var(--c-text);
  color: #000;
  font-size: var(--t-callout);
  font-weight: var(--fw-semibold);
}

.pf-google:active { opacity: 0.8; }
.pf-fine { font-size: var(--t-caption); color: var(--c-text-faint); line-height: var(--lh-body); }

/* --- header --- */

.pf-head { display: flex; align-items: center; gap: var(--s-3); }

.pf-avatar {
  width: 52px; height: 52px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: var(--border-gold);
  background: var(--c-gold-wash);
  color: var(--c-gold);
  font-size: var(--t-title-3);
  font-weight: var(--fw-bold);
}

.pf-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-name { font-size: var(--t-callout); font-weight: var(--fw-bold); }
.pf-verified { color: var(--c-success); }
.pf-mail { font-size: var(--t-caption); color: var(--c-text-faint); overflow-wrap: anywhere; }
.pf-role { font-size: var(--t-caption); color: var(--c-text-muted); margin-top: 2px; }
.pf-role.is-ok { color: var(--c-success); }

/* --- contact --- */

.pf-contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: var(--border-hairline);
  border-left: 3px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

/* A seller with listings and no number is losing every lead and cannot tell.
   This is the one place on the page that is allowed to shout. */
.pf-contact.is-missing { border-left-color: var(--c-warning); }

.pf-contact-label {
  font-size: var(--t-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  flex-wrap: wrap;
}

.pf-contact-label em { font-style: normal; color: var(--c-warning); }

.pf-contact-row { display: flex; gap: var(--s-2); }

.pf-input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 var(--s-3);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--t-callout);
}

.pf-save {
  flex: none;
  min-height: var(--tap-min);
  padding: 0 var(--s-4);
  border: var(--border-gold);
  border-radius: var(--r-md);
  background: var(--c-gold-wash);
  color: var(--c-gold);
  font-size: var(--t-footnote);
  font-weight: var(--fw-semibold);
}

.pf-contact-note { font-size: var(--t-caption); color: var(--c-text-muted); line-height: 1.45; }
.pf-contact-note.is-bad { color: var(--c-danger); }

/* --- stats --- */

.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }

.pf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s-3) var(--s-1);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.pf-stat-v { font-size: var(--t-title-3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.pf-stat-l { font-size: var(--t-caption-2); color: var(--c-text-muted); }
.pf-stat.is-gold .pf-stat-v { color: var(--c-gold); }
.pf-stat.is-good .pf-stat-v { color: var(--c-success); }

/* --- tabs --- */

.pf-tabs { display: flex; gap: var(--s-2); border-bottom: var(--border-hairline); }

.pf-tab {
  flex: 1;
  min-height: var(--tap-min);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--t-footnote);
  font-weight: var(--fw-semibold);
}

.pf-tab.is-on { color: var(--c-gold); border-bottom-color: var(--c-gold); }

/* --- items --- */

.pf-list { display: flex; flex-direction: column; gap: var(--s-2); }

.pf-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2);
  border: var(--border-hairline);
  border-left: 3px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: left;
}

/* The left edge carries the lifecycle, so a seller can scan the column and see
   which listings need attention without reading a word. */
.pf-item.is-live    { border-left-color: var(--c-success); }
.pf-item.is-expired { border-left-color: var(--c-warning); }
.pf-item.is-gone    { border-left-color: var(--c-danger); opacity: 0.7; }
.pf-item.is-sold    { border-left-color: var(--c-tint-1); opacity: 0.8; }
.pf-item.is-pending { border-left-color: var(--c-text-faint); }

.pf-thumb {
  width: 72px;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-raised);
}

.pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-item-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-1) var(--s-1) var(--s-1) 0; }

.pf-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.pf-item-top strong { font-size: var(--t-subhead); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-price { font-size: var(--t-footnote); color: var(--c-gold); flex: none; font-variant-numeric: tabular-nums; }

.pf-life { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-caption); color: var(--c-text-muted); }
.pf-life.is-urgent { color: var(--c-warning); }

.pf-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex: none; }

.pf-item-metrics { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-caption); color: var(--c-text-faint); }
.pf-item-metrics em { font-style: normal; color: var(--c-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pf-gone { color: var(--c-danger); }

.pf-hint { font-size: var(--t-caption); color: var(--c-text-muted); line-height: 1.45; }

.pf-relist {
  margin-top: var(--s-1);
  align-self: flex-start;
  min-height: 34px;
  padding: 0 var(--s-3);
  border: var(--border-gold);
  border-radius: var(--r-pill);
  background: var(--c-gold-wash);
  color: var(--c-gold);
  font-size: var(--t-caption);
  font-weight: var(--fw-semibold);
}

.pf-relist:disabled { opacity: 0.5; }

.pf-empty { padding: var(--s-8) var(--s-4); text-align: center; color: var(--c-text-faint); font-size: var(--t-subhead); line-height: var(--lh-body); }

.pf-out {
  margin-top: var(--s-2);
  min-height: var(--tap-min);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--t-footnote);
}

@media (prefers-reduced-motion: reduce) {
  .pf-backdrop, .pf-sheet { transition: none; }
}