/* Real-app additions: page frame, sign-in and setup screens, first-run choice. */
:root{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
html,body{min-height:100%}
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gate[hidden]{display:none!important}
.gate-card{width:min(440px,100%);border-radius:36px;padding:34px 30px 30px;display:flex;flex-direction:column;gap:14px}
.gate-slash{width:22px;height:32px;fill:var(--orange);filter:drop-shadow(0 0 14px rgba(240,86,31,.8));margin-bottom:6px}
.gate-card h1{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.gate-card p{color:var(--ink-2);line-height:1.5}
.gate-card code{font:600 13px ui-monospace,"SF Mono",Menlo,monospace;background:var(--track);padding:2px 6px;border-radius:7px;color:var(--ink)}
.gate-steps{display:flex;flex-direction:column;gap:8px;padding-left:20px;color:var(--ink-2);line-height:1.5}
.gate-form{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.gate-form .btn{align-self:stretch}
.gate-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.gate-actions .btn{flex:1}
.signed-in{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:14px 16px;border-radius:20px;background:var(--track);box-shadow:inset 0 0 0 1px var(--hair)}
.signed-in span{font-size:13px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.copy-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy-row code{font:600 13px ui-monospace,"SF Mono",Menlo,monospace;background:var(--track);padding:6px 10px;border-radius:10px;word-break:break-all}
body.locked .main{visibility:hidden}
.gate-note{font-size:13px;line-height:1.45;padding:10px 14px;border-radius:14px;margin:0}
.gate-note.error{color:var(--orange-ink);background:var(--orange-tint);box-shadow:inset 0 0 0 1px rgba(240,86,31,.35)}
.gate-note.ok{color:var(--ink);background:var(--track);box-shadow:inset 0 0 0 1px var(--hair)}
.gate-link{align-self:flex-start;color:var(--orange-ink);font-weight:600;font-size:14px;padding:2px 0}
.gate-foot{font-size:13px;color:var(--ink-3)!important;border-top:1px solid var(--hair);padding-top:14px;margin-top:2px}
.gate-email{font-weight:600;color:var(--ink)!important}
.team-list .row-end .btn{flex:none}
.team-invite{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:8px}
@media (max-width:640px){.team-invite{grid-template-columns:minmax(0,1fr)}}
.share-link{display:grid;gap:10px;margin:12px 0;padding:14px 16px;border-radius:20px;background:var(--track);box-shadow:inset 0 0 0 1px var(--hair)}
.share-link p{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.share-link p b{color:var(--ink)}
.share-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.share-row .inline{font-size:13px;color:var(--ink-2);text-overflow:ellipsis}
/* Tag lists in editors */
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:52px;padding:8px;border-radius:16px;background:var(--track);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--rim-soft);cursor:text}
.tags:focus-within{box-shadow:0 0 0 2px var(--orange)}
.tag{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 4px 0 12px;border-radius:999px;font-size:14px;font-weight:600;background:var(--thumb);box-shadow:var(--inner),0 2px 8px -4px rgba(0,0,0,.35);animation:tag-in .35s var(--spring)}
.tag-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .2s,color .2s}
.tag-x:hover{background:var(--orange-tint);color:var(--orange-ink)}
.tags-input{flex:1;min-width:140px;height:32px;border:0!important;background:none!important;box-shadow:none!important;outline:none;padding:0 6px!important;font-size:14px}
@keyframes tag-in{from{transform:scale(.85);opacity:0}}
/* Segmented controls: labels centred */
.seg button,.seg a{justify-content:center;text-align:center}
.tags .tags-input{height:32px}
/* Account menu under the avatar */
.av-btn{display:inline-grid;place-items:center;border-radius:50%;padding:2px;transition:transform .4s var(--spring)}
.av-btn:hover{transform:scale(1.08)}
.av-btn:active{transform:scale(1.15)}
.account-menu{position:fixed;z-index:70;top:calc(70px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));min-width:250px;border-radius:24px;padding:8px;display:flex;flex-direction:column;gap:2px;animation:menu-in .35s var(--spring)}
.account-menu .am-who{display:flex;flex-direction:column;padding:10px 12px 12px;border-bottom:1px solid var(--hair);margin-bottom:4px;min-width:0}
.account-menu .am-who b{font-size:15px}
.account-menu .am-who span{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu button{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:14px;font-weight:600;text-align:left;transition:background .2s}
.account-menu button:hover,.account-menu button:focus-visible{background:var(--track)}
.account-menu .am-out{color:var(--orange-ink)}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}