/* The initial in the bar, and the panel behind it.

   you.html's rules for `.you` - the ring between Search and the menu lines -
   and `.yp`, the paper panel it opens: the name and its line, the six rows,
   the quiet foot, the sign-in form, and the phone's sheet from the foot.

   Chrome, so it loads on every 2026 route beside _footer and _desk rather
   than on one page. The mock's account and keepers' pages are pages and are
   not taken here.

   Built by scratchpad/design-2026/build-you-2026.py - do not edit by hand. */
.you{display:grid;place-items:center;width:30px;height:30px;margin:0 6px;border:1px solid currentColor;border-radius:50%;font-family:var(--sans);font-size:10px;font-weight:600}
/* the panel behind the initial: a ring and the name, then plain rows with air, the Studio and the keepers' room marked with a small tag */
.yp{position:absolute;right:var(--edge);top:calc(var(--bar) + 10px);width:380px;color:var(--ink);background:var(--paper);box-shadow:0 30px 80px rgba(65,64,66,.22);padding:26px 28px 20px;z-index:5;animation:yp .35s var(--ease) both}
.yp-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--stone)}
.yp-ring{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;font-family:var(--face);font-size:18px;color:var(--ink)}
.yp-top b{display:block;font-family:var(--face);font-weight:400;font-size:21px;line-height:1.1}
.yp-top i{display:block;margin-top:4px;font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--ink-55)}
.yp-rows{display:flex;flex-direction:column;margin:10px 0 0}
.yp-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 10px;margin:0 -10px;color:var(--ink);transition:background .2s}
.yp-row:hover{background:var(--stone)}
.yp-row b{font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.2;white-space:nowrap}
.yp-row i{font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--ink-55);text-align:right;line-height:1.35}
.yp-row.first b::before{content:"";display:inline-block;width:8px;height:8px;background:var(--forest);margin-right:10px;vertical-align:1px}
.yp-row.first b{color:var(--forest)}
.yp-quiet{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:14px;border-top:1px solid var(--stone)}
.yp-quiet a{font-family:var(--sans);font-size:12.5px;color:var(--ink-55)}
.yp-quiet a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.yp-form{display:grid;gap:14px;margin-top:18px}
.yp-form label{display:grid;gap:6px;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink)}
.yp-form input{height:46px;padding:0 14px;border:1px solid var(--stone-2);background:var(--paper);font-family:var(--sans);font-size:15px;color:var(--ink)}
.yp-form input:focus{outline:2px solid var(--forest);outline-offset:-1px}
.yp.sheet{top:auto;bottom:0;left:0;right:0;width:auto;padding:24px 22px calc(20px + env(safe-area-inset-bottom));animation:sheet .4s var(--ease) both}
.yp.sheet .yp-rows{max-height:52vh;overflow:auto}
@keyframes yp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}