/* NITRATE profile — the person's own page.  PROFILE_20260901.
 * Consumes tokens.css only; no new palette, no new type scale.  Two
 * breakpoints (≤760, ≤430) per MOBILE_SPEC.  Inputs 16px so iOS does not
 * zoom; every control ≥ var(--tap) tall on the phone tiers. */

.pf-wrap{
  max-width:1060px; margin:0 auto; padding:26px var(--pad) 60px;
}

/* ---- identity ---- */
.pf-id{margin-bottom:var(--gap)}
.pf-id-row{display:flex; align-items:center; gap:20px; min-width:0}
.pf-face{flex:none; width:96px; height:96px; overflow:hidden}
.pf-face-img{width:100%; height:100%; object-fit:cover; display:block}
.pf-mono{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--rule);
  font-family:var(--font-display, inherit); font-size:44px; color:var(--ink-2);
}
.pf-id-who{min-width:0}
.pf-name{
  margin:0 0 4px; font-size:26px; letter-spacing:.02em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-sub{margin:0; font-size:12.5px; color:var(--muted);
        font-family:ui-monospace,Menlo,monospace}
/* VIP_20260905 — the tier tag beside the name, dressed like the masthead's
   admin/vip chip so the two read as one fact. */
.pf-tag{
  display:inline-block; vertical-align:middle; margin-left:10px;
  font:500 10px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 6px; border-radius:2px;
  border:1px solid var(--rule); color:var(--muted);
}
.pf-tag-vip{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.pf-bio-line{margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-2);
             max-width:64ch}
.pf-note{margin:8px 0 0; font-size:12.5px; color:var(--muted); max-width:56ch}

/* ---- the card grid ---- */
.pf-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  align-items:start;
}
.pf-card{
  background:var(--panel); border:1px solid var(--rule); padding:18px 18px 16px;
  min-width:0;
}
.pf-h{
  margin:0 0 10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.pf-hint{margin:0 0 12px; font-size:12px; line-height:1.55; color:var(--muted)}

/* DOORS_20260901 — the one-line outcome of a Connect-Google round trip */
.pf-door{margin:0 0 14px; padding:9px 12px; font-size:13px; line-height:1.5;
  border:1px solid var(--rule); border-left-width:3px; border-radius:6px}
.pf-door.is-ok{color:var(--ok); border-left-color:var(--ok)}
.pf-door.is-bad{color:var(--crit); border-left-color:var(--crit)}
.pf-msg{margin:10px 0 0; font-size:12.5px; color:var(--ink-2); min-height:1.2em}
.pf-msg.is-bad{color:var(--crit)}
.pf-msg.is-ok{color:var(--ok)}
.pf-stat{margin:0 0 8px; font-size:13.5px; line-height:1.5; color:var(--ink-2)}

/* ---- controls (the .lg-out family, one size up for a page context) ---- */
.pf-label{display:block; margin:0 0 12px; font-size:11px; letter-spacing:.1em;
          text-transform:uppercase; color:var(--muted)}
.pf-input{
  display:block; width:100%; margin-top:6px; padding:9px 10px;
  font-size:16px; color:var(--ink); background:var(--ground);
  border:1px solid var(--rule);
}
.pf-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pf-area{resize:vertical; min-height:70px; font:inherit; font-size:16px;
         line-height:1.5}
.pf-btnrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pf-btn{
  font:inherit; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid var(--rule); color:var(--ink-2);
  padding:7px 14px; cursor:pointer;
}
.pf-btn:hover{color:var(--ink)}
.pf-btn.is-cut{color:var(--muted)}
.pf-btn.is-cut:hover{color:var(--crit); border-color:var(--crit)}
.pf-btn.is-armed{color:var(--accent-ink); background:var(--accent);
                 border-color:var(--accent)}

/* ---- sessions ---- */
.pf-sess-row{
  display:flex; align-items:center; gap:12px; padding:9px 0;
  border-top:1px solid var(--rule);
}
.pf-sess-row:first-child{border-top:0}
.pf-sess-what{min-width:0; flex:1 1 auto}
.pf-sess-head{font-size:13px; color:var(--ink-2)}
.pf-sess-sub{font-size:11.5px; color:var(--muted); margin-top:2px;
             line-height:1.45}
.pf-sess-you{
  flex:none; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--rule); padding:2px 6px; color:var(--muted);
}
.pf-sess .pf-btnrow{margin-top:12px; padding-top:12px;
                    border-top:1px solid var(--rule)}

/* ---- asks ---- */
.pf-ask-row{padding:8px 0; border-top:1px solid var(--rule)}
.pf-ask-row:first-child{border-top:0}
.pf-ask-name{font-size:13px; color:var(--ink-2)}
.pf-ask-state{font-size:11.5px; color:var(--muted); margin-top:2px}

/* ================================================================ THE PHONE */
@media (max-width:760px){
  .pf-wrap{padding:18px var(--m-pad, 14px) 48px}
  .pf-face{width:72px; height:72px}
  .pf-mono{font-size:32px}
  .pf-name{font-size:21px; white-space:normal}
  .pf-btn{min-height:var(--tap); padding:7px 16px}
  .pf-sess-row .pf-btn{flex:none}
}

/* =============================================================== THE NARROW */
@media (max-width:430px){
  .pf-id-row{gap:14px}
  .pf-card{padding:14px}
}

/* HOUSEFACES_20260905 — the house's own faces: two rows of tiles under the
   upload buttons. The worn one carries the accent frame. */
.pf-faces-h{margin:16px 0 2px; font-size:11px; letter-spacing:.12em;
            text-transform:uppercase; color:var(--ink-2)}
.pf-faces-k{margin:10px 0 6px; font-size:10.5px; letter-spacing:.12em;
            text-transform:uppercase; color:var(--muted)}
.pf-faces{display:flex; flex-wrap:wrap; gap:6px}
.pf-face-pick{width:56px; height:56px; padding:0; margin:0; background:none;
              border:1px solid var(--rule); border-radius:2px; overflow:hidden;
              cursor:pointer}
.pf-face-pick img{width:100%; height:100%; object-fit:cover; display:block}
.pf-face-pick:hover{border-color:var(--ink-2)}
.pf-face-pick[aria-pressed="true"]{border-color:var(--accent);
                                   box-shadow:0 0 0 1px var(--accent)}
@media (max-width:760px){ .pf-face-pick{width:48px; height:48px} }