/* Org settings, badges, team, and the More page. Builds on app.css tokens. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Report cover preview ---- */
.cover-preview { margin: 0 0 24px; }
.cover-preview-page {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08); padding: 24px 20px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.cover-preview-logo { min-height: 56px; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.cover-preview-logo img { max-height: 88px; max-width: 260px; object-fit: contain; }
.cover-preview-logo img[hidden], .cover-preview-name[hidden] { display: none; }
.cover-preview-name { font-size: 1.4rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.cover-preview-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cover-preview-badges img { height: 40px; width: auto; max-width: 96px; object-fit: contain; }
.cover-preview-bar { align-self: stretch; height: 8px; border-radius: 4px; background: var(--preview-brand, var(--brand)); }
.cover-preview-title { font-size: 1.1rem; font-weight: 700; color: var(--preview-brand, var(--brand)); }
.cover-preview-lines { display: grid; gap: 6px; justify-items: center; width: 100%; }
.cover-preview-lines span { display: block; height: 8px; border-radius: 4px; background: #eceff3; width: 70%; }
.cover-preview-lines span:nth-child(2) { width: 50%; }
.cover-preview-lines span:nth-child(3) { width: 60%; }
.cover-preview-caption { margin-top: 8px; text-align: center; font-size: 0.8rem; color: var(--muted); }

/* ---- Settings form ---- */
.logo-current {
  display: inline-flex; padding: 10px; margin-bottom: 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  /* Checkerboard so transparent PNGs read as transparent. */
  background: repeating-conic-gradient(#f0f2f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.logo-current img { max-height: 64px; max-width: 220px; object-fit: contain; display: block; }
.settings-form input[type=file] { display: block; width: 100%; min-height: 44px; padding: 8px 0; font-size: 16px; }
.color-field { display: flex; gap: 10px; align-items: stretch; }
.color-field input[type=color] { flex: 0 0 56px; width: 56px; height: 44px; cursor: pointer; }
.color-field input[type=text] { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
.settings-link { margin: 4px -16px -16px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.save-bar {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); z-index: 5;
  padding: 8px 0 0; background: linear-gradient(to bottom, rgba(246, 247, 249, 0), var(--bg) 40%);
}
.save-bar .btn { min-height: 52px; box-shadow: var(--shadow); }

/* ---- Badges ---- */
.badge-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px 10px 16px; min-height: 64px;
  border-bottom: 1px solid var(--border);
}
.badge-row .row-main { flex: 1 1 150px; min-width: 150px; }
.badge-row .row-title { white-space: normal; overflow-wrap: anywhere; }
.badge-row:last-child { border-bottom: 0; }
.badge-thumb { width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; }
.badge-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.badge-actions form { margin: 0; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; font-size: 1.1rem; }
.badge-actions .btn-sm { min-height: 44px; }

/* ---- Team ---- */
.member-row { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: 0; }
.member-head { display: flex; align-items: center; gap: 12px; }
.member-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.member-actions form { margin: 0; }
.member-actions .role-form { flex: 1; display: flex; gap: 8px; }
.member-actions .role-form select { min-height: 44px; }
.member-actions .btn-sm { min-height: 44px; }
.chip-role-owner { background: var(--brand); color: var(--brand-contrast); }
.chip-role-admin { background: #e3edf8; color: var(--info); }
.chip-role-inspector { background: #eef1f5; color: var(--muted); }

/* ---- Invite link ---- */
.invite-card p { margin-bottom: 14px; }
.invite-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px !important;
  background: #f6f7f9 !important; margin-bottom: 12px;
}
.invite-share { margin-bottom: 8px; }
.invite-share .btn, .invite-share button {
  display: flex; width: 100%; min-height: 56px; font-size: 1.1rem;
  background: var(--brand); border-color: var(--brand); color: var(--brand-contrast);
}
.invite-note { margin: 12px 0 0 !important; text-align: center; }

/* ---- More page ---- */
.profile-card { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: var(--brand); color: var(--brand-contrast);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem;
}
.logout-form { margin: 8px 0 12px; }