/* Profile surface — "You". Owned by the profile builder.
   Everything scoped under .profile. Tokens come from app.css; nothing here
   invents a colour. The signature is the openness dial: a private instrument
   with a dark readout and segmented controls, near-black labels on magenta. */

/* ------------------------------------------------------------------ header */

.profile .p-head { margin-bottom: 24px; }
.profile .p-handle { display: flex; align-items: center; gap: 14px; min-height: 42px; }
.profile .p-handle h1 { font-size: 32px; }
.profile .handle-form { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 460px; }
.profile .handle-form .input { flex: 1; }
.profile .p-sub { margin-top: 4px; }

.profile .p-goal-wrap { margin-top: 18px; }
.profile .p-eyebrow {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.profile .p-goal {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  line-height: 1.35; max-width: 620px;
}
.profile .p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* -------------------------------------------------------------- stat tiles */

.profile .p-tiles { grid-template-columns: 1fr 1fr 1.9fr; margin-bottom: 28px; }
.profile .tile--love .n { display: flex; align-items: baseline; gap: 8px; }
.profile .tile--love .n-sub {
  font-family: var(--mono); font-size: 12.5px; font-weight: 400;
  color: var(--accent-text);
}
.profile .tile-note { margin-top: 6px; color: var(--text); }
.profile .tile-priv {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.profile .tile-priv svg { flex: none; }

@media (max-width: 760px) {
  .profile .p-tiles { grid-template-columns: 1fr 1fr; }
  .profile .tile--love { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------- grid

   The record owns the main column top to bottom — archive, ladders, love,
   ways back — and the rail holds only the openness dial, sticky, so the
   instrument stays at hand and the rail never runs out into dead canvas
   while the record is still scrolling. The page is a little wider than the
   stock .col--wide so ladders get a full measure without cramping the dial. */

.profile.col--wide { max-width: 1100px; }

.profile .p-grid {
  display: grid;
  /* The rail floor keeps the dial's four-segment expiry track from
     crushing at narrow desktop widths; below 1100px the grid stacks. */
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr);
  gap: 28px;
  align-items: start;
}
.profile .p-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.profile .p-side {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 28px;
  /* Short viewports: the dial scrolls inside itself rather than pinning its
     lower controls out of reach. On 900-tall screens this never engages. */
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
}
@media (max-width: 1100px) {
  .profile .p-grid { grid-template-columns: 1fr; }
  .profile .p-side { position: static; max-height: none; overflow: visible; margin-top: 8px; }
}

.profile .sect-head { margin-bottom: 10px; }
.profile .sect-head p { margin-top: 4px; }

/* ------------------------------------------------------------- the archive */

.profile .arch-month {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 10px;
}
.profile .arch-month:first-of-type { margin-top: 14px; }
.profile .arch-month::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.profile .arch {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 18px;
}
.profile .arch + .arch { margin-top: 12px; }
.profile .arch--withdrawn { opacity: .6; border-style: dashed; }

.profile .arch-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile .arch-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.profile .arch-title { margin-top: 10px; }
.profile .arch-place {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
}
.profile .arch-place svg { flex: none; }
.profile .arch-note { margin-top: 8px; color: var(--text); }
.profile .arch-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.profile .ev-lvl {
  font-size: 10px; opacity: .75;
  border-right: 1px solid currentColor; padding-right: 5px; margin-right: 1px;
}
.profile .ev-1 { background: var(--raised); color: var(--accent-text); }
.profile .ev-2 { background: var(--accent-tint); color: var(--accent-text); }
.profile .ev-retracted { text-decoration: line-through; opacity: .55; }

/* Plum is decoration only: a hairline beside the retraction record. */
.profile .arch-retraction {
  margin-top: 10px; padding-left: 10px;
  border-left: 2px solid var(--plum);
}
.profile .arch-withdrawn-note { margin-top: 10px; }

/* ----------------------------------------------------------------- ladders */

.profile .p-ladders { display: flex; flex-direction: column; gap: 14px; }
.profile .ladder-card .ladder { margin-top: 12px; }
.profile .pill--lvl3 { background: var(--accent); color: var(--accent-on); }

.profile .step-body { min-width: 0; flex: 1; padding-bottom: 2px; }
.profile .step-rung {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.profile .step-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.profile .step-title { font-weight: 500; }
.profile .step-title--later { color: var(--muted); font-weight: 400; }
.profile .step.done .step-title { color: var(--text); }
.profile .step-state { font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.profile .step-state--now, .profile .step-state--next { color: var(--accent-text); }
.profile .step.cur .rail .rung { color: var(--accent); }

/* --------------------------------------------------------- the openness dial
   The signature. Instrument, not settings page: a dark readout strip that
   states the current posture in words, then three segmented axes and a decay
   control. Active segments are magenta with near-black labels — never white. */

.profile .dial {
  background: linear-gradient(180deg, var(--raised), var(--surface) 70%);
}
.profile .dial-priv { display: inline-flex; align-items: center; gap: 6px; }
.profile .dial-edge { margin: 12px 0 14px; }

.profile .dial-read {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--accent-text);
  letter-spacing: .02em;
  white-space: pre-line;
  min-height: 44px;
}

.profile .axis { margin-top: 14px; }
.profile .axis-lbl {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.profile .seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.profile .seg button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: 12.5px; font-weight: 600;
  padding: 7px 6px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), transform var(--t);
}
.profile .seg button:hover { color: var(--text); }
.profile .seg button:active { transform: scale(.96); }
.profile .seg button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-on);
}
.profile .dial-note { margin-top: 12px; }
.profile .dial-note + .dial-note { margin-top: 6px; }

/* --------------------------------------------------------------- ways back */

.profile .ways { list-style: none; margin: 12px 0 0; padding: 0; }
.profile .way {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.profile .way:first-child { border-top: 0; }
.profile .way-method {
  flex: none;
  font-size: 11px; letter-spacing: .06em;
  background: var(--raised);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  color: var(--text);
}
.profile .way-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile .way-date { flex: none; }
.profile .way--revoked .way-label,
.profile .way--revoked .way-method { text-decoration: line-through; opacity: .55; }

.profile .way-nudge {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: var(--accent-tint);
  color: var(--text);
}
.profile .way-form .row { align-items: stretch; }
.profile .way-form .btn { flex: none; }

/* The form answers in place — a bottom-of-screen toast can cover the very
   field it is about. Error text uses the dark-safe magenta, never white-on-
   magenta and never a fill. */
.profile .way-msg { margin-top: 8px; color: var(--muted); }
.profile .way-msg--err { color: var(--accent-text); }

/* ----------------------------------------------------------- love received */

.profile .love-list { list-style: none; margin: 10px 0 0; padding: 0; }
.profile .love-act { padding: 10px 0; border-top: 1px solid var(--line); }
.profile .love-act:first-child { border-top: 0; }
.profile .love-text { margin-bottom: 3px; }

/* ---------------------------------------------------------------- sign out */

.profile .p-signout { padding: 6px 0 20px; }

/* The phone tab-bar rung fix now lives in app.css (adopted from
   docs/notes/profile-shell-requests.md at integration). */

/* Comfort rung picker — a choice, made where it says it is made. */
.p-rungchip { cursor: pointer; border: 1px solid transparent; }
.p-rungchip:hover { border-color: var(--line); }
.p-rungpick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.p-rungpick .chip { cursor: pointer; }
.p-rungpick .small { flex-basis: 100%; }