/**
 * @file public/css/views/app-grant.css
 * @description Styles for the app-grant consent page (agr- prefix) — the trusted apex approval
 *   screen where an owner reviews a published app's requested scopes (H-2 Phase 3).
 * @structure identity head (icon/monogram + name + origin + badge), title + lede, one-line area
 *   summary + details disclosure, the exact scope list (checkboxes), guarantees, actions.
 * @version-history
 *   v1.0.0 — 2026-06-20 — Initial (H-2 origin isolation, Phase 3).
 *   v1.1.0 — 2026-07-19 — Own-app badge variant + "new" chip for newly requested scopes.
 *   v1.2.0 — 2026-07-27 — Weight pass: identity head with icon/monogram, collapsed scope list,
 *     guarantee list, and a card that fits a consent popup without an inner scrollbar (the old
 *     3rem margin + always-open scope boxes pushed the buttons below the fold).
 */

.agr-wrap { max-width: 470px; margin: 1.5rem auto; padding: 0 1rem 1.5rem; }

.agr-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 1.35rem 1.35rem 1.25rem;
}

/* ── Identity: what IS this thing, before what it asks for ─────────────────────────── */
.agr-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }

.agr-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.agr-icon-img { width: 100%; height: 100%; object-fit: cover; }
.agr-icon-glyph { font-size: 1.4rem; line-height: 1; }
/* Fallback for apps with no icon: first letter of the name, in the accent colour. */
.agr-icon-mono { font-size: 1.25rem; font-weight: 800; color: var(--accent); line-height: 1; }

.agr-head-text { min-width: 0; flex: 1 1 auto; }
.agr-app-name { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.agr-app-origin {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  overflow-wrap: anywhere;
}

.agr-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--text); }
.agr-lede { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 1rem; }
.agr-muted { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 1rem; }

/* ── One line instead of a wall: the areas the app works with ──────────────────────── */
.agr-summary {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-dim);
  padding: 0.65rem 0.8rem;
  font-size: 0.9rem;
  color: var(--text);
}
.agr-summary-label { font-weight: 700; margin-right: 0.35rem; }
.agr-summary-areas { color: var(--text); }

.agr-details-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.45rem 0;
  margin: 0;
}
.agr-details-toggle:hover { text-decoration: underline; }

.agr-scopes { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.agr-scope {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, var(--bg-dim));
}
.agr-scope-check { margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; }
.agr-scope-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.agr-scope-name { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--accent); }
.agr-scope-desc { font-size: 0.86rem; color: var(--text); }
.agr-details-hint { font-size: 0.78rem; color: var(--text-dim); margin: 0 0 0.75rem; }

/* ── The guarantees, said as promises ──────────────────────────────────────────────── */
.agr-assure { list-style: none; margin: 0.9rem 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.agr-assure li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.84rem;
  color: var(--text-dim);
}
.agr-assure li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success, #3dbf6e);
  font-weight: 700;
}

/* "External app" badge */
.agr-badge {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn, #e8a44a);
  background: var(--bg-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
}
/* The signed-in owner's OWN app — reassuring, not warning */
.agr-badge-own { color: var(--success, #3dbf6e); }

/* Chip on a scope the app requests but the existing grant doesn't hold yet */
.agr-scope-newbadge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0 0.4rem;
  margin-left: 0.45rem;
  vertical-align: 0.08em;
}

.agr-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.agr-btn { min-width: 7rem; text-align: center; }

/* Consent opens in a small popup window: keep the decision reachable on a short viewport. */
@media (max-height: 620px) {
  .agr-wrap { margin: 0.75rem auto; }
  .agr-card { padding: 1rem 1.1rem; }
  .agr-title { font-size: 1.1rem; }
}

@media (max-width: 420px) {
  .agr-actions { flex-direction: column-reverse; }
  .agr-btn { width: 100%; }
}