.team-tabs{margin:0 0 16px} .team-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #eee6dc}.team-row:last-child{border-bottom:0}.team-row small{display:block;color:#7c7268;margin-top:4px} .team-you{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#fff1e7;color:#b0521d;font-size:12px} .team-edit{display:flex;flex-wrap:wrap;align-items:end;gap:8px} .team-edit [data-owner-warning]{flex:1 1 100%;margin:0}.team-edit label{display:grid;gap:4px;font-size:12px;color:#7c7268}.team-edit input,.team-edit select,.team-link-row input{border:1px solid #e3dbd0;border-radius:999px;padding:8px 14px;font:inherit;background:#fff} .team-link-row{display:flex;gap:8px;flex-wrap:wrap}.team-link-row input{flex:1;min-width:0}.team-roles{border:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}:is(.account-page,.team-root) .warning{color:#9a3d12} .sheet-dialog{border:0;border-radius:24px;padding:28px}.sheet-dialog::backdrop{background:#1f1b1640} /* Settings → Team (public/team.js inside the Settings dialog): the subtitle and the invite action share one row. */ .team-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.team-head p{margin:0}.team-seats{font-size:12px;margin-top:2px}.team-foot{margin-top:18px;padding-top:14px;border-top:1px solid #eee6dc}.team-row-expired strong{color:#7c7268} .join-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0}.join-facts dt{color:#7c7268}.join-facts dd{margin:0;font-weight:600} @media(max-width:600px){.team-row{flex-direction:column}.team-edit{width:100%}.team-edit label{flex:1 1 100%} /* Phone pass (375–430px): 44px targets, stacked rows, copy row and dialogs that follow the visible viewport while the keyboard is open. */ .team-tabs button{flex:1 1 auto;justify-content:center} .team-row{overflow-wrap:anywhere}.team-row .action-row{width:100%;margin-top:4px}.team-row .action-row .btn,.team-edit .btn{flex:1} .team-edit input,.team-edit select,.team-link-row input{min-height:44px}.team-link-row{flex-direction:column}.team-link-row .btn{width:100%} .team-roles{flex-direction:column;gap:4px}.team-roles label{display:flex;align-items:center;gap:10px;min-height:44px}.team-roles input{width:20px;height:20px;margin:0;flex:none} :is(.sheet-dialog,.join-form) .action-row{flex-direction:column-reverse}:is(.sheet-dialog,.join-form) .action-row .btn{width:100%}.team-head .btn{width:100%} .sheet-dialog{position:fixed;inset:auto 0 auto 0;top:calc(var(--da-visible-top,0px) + 12px);margin:0 auto;width:calc(100% - 24px);max-width:none;max-height:calc(var(--da-visible-height,100dvh) - 24px);overflow:auto;padding:22px 18px;border-radius:20px} #join-card h1{font-size:clamp(26px,7vw,34px);overflow-wrap:anywhere}.join-facts{grid-template-columns:1fr;gap:2px 0}.join-facts dt{margin-top:8px}.join-facts dd{overflow-wrap:anywhere} .join-form .field input{min-height:44px}.join-form .btn,#join-google{width:100%} .portal-hero .action-row .btn{width:100%}} /* Short viewports (375×500, or a phone with the keyboard up): keep the sheet inside the visible area and trim the hero. */ @media(max-height:520px){.sheet-dialog{top:calc(var(--da-visible-top,0px) + 6px);max-height:calc(var(--da-visible-height,100dvh) - 12px);padding:16px 18px}.account-page .portal-hero{padding:22px 0 16px}} /* /join shares the sign-in page's "or" divider; login.css is not loaded here. */ .or-divider{display:flex;align-items:center;gap:14px;margin:18px 0 14px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#8a8c81} .or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:#e3e4db} .or-divider[hidden]{display:none} /* Inside the workspace dialog, the app's form label rules would top-align the Permission radios: keep them centred. */ .sheet-dialog .team-roles label{display:flex;align-items:center;gap:10px;min-height:44px;margin:0}.sheet-dialog .team-roles input{margin:0;width:20px;height:20px;flex:none} .sheet-dialog .team-check{min-height:44px;margin:4px 0} /* The member card's Operations tick: the box and its words on one line (the other .team-edit labels are grids: caption over control). */ .team-edit .team-check{display:flex;align-items:center;gap:10px;flex:1 1 100%;font-size:13px;color:var(--ink)} /* Property access (Settings → Team, docs/TENANCY.md "Property access"): the Access line on a member row, the checklist dialog and the invite form's picker. Checkbox rows keep a 44px touch target on phones; the list scrolls inside the sheet. */ .team-access{display:block;margin-top:4px} .team-access-mode[hidden],.access-pick[hidden],.access-option[hidden]{display:none} .access-pick{display:grid;gap:8px;margin:4px 0 10px} .access-filter{box-sizing:border-box;width:100%;min-height:40px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:inherit;background:var(--white)} .access-list{display:grid;gap:2px;max-height:min(320px,42vh);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:6px;background:var(--white)} .access-option{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 10px;border-radius:12px;cursor:pointer;overflow-wrap:anywhere}.access-option:hover{background:var(--pale)} .access-option input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--ink)} .access-bulk{gap:6px;margin:0} @media(max-width:600px){.access-option,.access-filter{min-height:44px}.access-list{max-height:min(300px,38vh)}.access-bulk{flex-direction:row}.access-bulk .btn{flex:1}} /* phone-qa-2: WebKit kept these