/* access.css — Profiles & Access admin screen. Paper field, charcoal type,
   green only on the governed/owner moments. Matches the Soren restraint. */

.access-wrap { max-width: 920px; margin: 0 auto; padding: 36px 32px 80px; font-family: var(--font-body); color: var(--dark); }

.access-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin: 0; }
.access-sub { color: var(--mid); font-size: 14px; margin: 4px 0 0; }

.access-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-top: 24px; }
.access-card-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 17px; font-weight: 500; margin-bottom: 16px; }
.access-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.access-count { margin-left: auto; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--stone); }
.access-note { font-size: 12px; color: var(--stone); margin: 12px 0 0; }
.access-empty { color: var(--stone); font-size: 13px; padding: 18px; text-align: center; }

.access-btn { margin-left: auto; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--primary); background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 11px; cursor: pointer; }
.access-btn:hover { border-color: var(--primary); }
.access-btn.danger { color: var(--rose); border-color: transparent; }
.access-btn.danger:hover { border-color: var(--rose); }

/* Members table */
.member-table, .obj-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.member-table th, .obj-table th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--stone); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--divider); }
.member-table td, .obj-table td { padding: 9px 10px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.member-id { display: inline-flex; align-items: center; gap: 10px; }
.member-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ice, #DCE6EE); color: var(--field-ink, #3A6076); font-size: 11px; font-weight: 700; }
.member-name { display: block; font-weight: 600; }
.member-email { display: block; font-size: 12px; color: var(--stone); }
.member-status { font-size: 12px; color: var(--stone); }
.member-status.is-active { color: var(--green); font-weight: 600; }
.member-last { color: var(--stone); font-size: 12.5px; }

select.profile-pick, select.grant-pick, #baseAccess { font-family: var(--font-body); font-size: 13px; color: var(--dark); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; cursor: pointer; }

/* Profiles split */
.profile-split { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.profile-list { display: flex; flex-direction: column; gap: 4px; }
.profile-row { padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; }
.profile-row:hover { background: var(--bg); }
.profile-row.is-sel { background: var(--ice, #DCE6EE); border-color: var(--field-border, #C6D4DF); }
.profile-name { display: block; font-weight: 600; font-size: 13.5px; }
.profile-meta { display: block; font-size: 11.5px; color: var(--stone); margin-top: 1px; }
.profile-badge { margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: var(--primary-light); border-radius: 4px; padding: 1px 5px; }

.profile-editor { border-left: 1px solid var(--divider); padding-left: 20px; min-height: 120px; }
.editor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.editor-name { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--dark); background: none; border: none; border-bottom: 1px solid transparent; padding: 2px 0; }
.editor-name:focus { outline: none; border-bottom-color: var(--primary); }
.editor-name:disabled { color: var(--dark); }
.editor-base { font-size: 12.5px; color: var(--mid); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-hint { color: var(--stone); font-size: 11.5px; }

.obj-sigil { display: inline-block; width: 16px; text-align: center; font-weight: 700; color: var(--stone); }
.obj-sigil.metric { color: var(--metric-ink, #6E5325); }
.obj-sigil.field { color: var(--field-ink, #3A6076); }
.obj-flag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--metric-ink, #6E5325); background: var(--metric-bg, #F3ECDD); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.obj-flag.pii { color: var(--rose); background: var(--rose-light); }
.obj-sens { font-size: 12px; color: var(--mid); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* ── Invites ─────────────────────────────────────────────────────────────── */
.invite-bar { display: flex; gap: 8px; padding: 12px 0 0; align-items: center; flex-wrap: wrap; }
.invite-bar input[type="email"] { flex: 2; min-width: 200px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: var(--font-body); background: var(--surface); outline: none; }
.invite-bar select { flex: 1; min-width: 140px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--surface); font-family: var(--font-body); }
.access-btn.primary { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.invite-list { margin-top: 12px; border: 1px solid var(--divider); border-radius: 8px; overflow: hidden; }
.invite-list-head { padding: 8px 12px; background: var(--bg); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--divider); }
.invite-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--divider); font-size: 13px; }
.invite-row:last-child { border-bottom: none; }
.invite-email { font-weight: 600; color: var(--dark); }
.invite-meta { flex: 1; color: var(--stone); font-size: 12px; }