/* Recreation of GitHub's OAuth consent screen, used as the hero illustration
 * on the GitHub onboarding step. Everything scoped under .gh-consent.
 *
 * Two rules keep this from leaking into the host app:
 *   - every selector starts at .gh-consent
 *   - no bare element selectors; element names only ever appear as descendants
 *
 * Colours are the component's own custom properties, declared in full on the
 * bare .gh-consent so no value exists only inside a media query. Dark is then
 * applied twice: once for "system dark" and once for an explicit data-theme.
 *
 * Sizing is entirely em, off one root font-size that tracks the container
 * width, so the whole illustration shrinks as one piece. Nothing is in px
 * except hairline borders.
 */

.gh-consent {
  container-type: inline-size;
  position: relative;
  width: 100%;
  /* Matches the placeholder it stands in for, so the hero slot keeps its size. */
  max-width: 20rem;
  margin-inline: auto;

  /* Light */
  --ghc-canvas:       #f6f8fa;
  --ghc-card:         #ffffff;
  --ghc-border:       #d1d9e0;
  --ghc-border-soft:  #d1d9e0;
  --ghc-text:         #1f2328;
  --ghc-muted:        #59636e;
  --ghc-link:         #0969da;
  --ghc-green:        #1f883d;
  --ghc-green-border: rgba(31, 35, 40, .15);
  --ghc-on-green:     #ffffff;
  --ghc-btn:          #f6f8fa;
  --ghc-btn-border:   rgba(31, 35, 40, .15);
  --ghc-subtle:       #f6f8fa;
  --ghc-ok:           #1a7f37;
  --ghc-app-mark:     #f97583;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gh-consent {
    --ghc-canvas:       #010409;
    --ghc-card:         #0d1117;
    --ghc-border:       #3d444d;
    --ghc-border-soft:  #3d444d;
    --ghc-text:         #f0f6fc;
    --ghc-muted:        #9198a1;
    --ghc-link:         #4493f8;
    --ghc-green:        #238636;
    --ghc-green-border: rgba(240, 246, 252, .1);
    --ghc-on-green:     #d1d9e0;
    --ghc-btn:          #212830;
    --ghc-btn-border:   #3d444d;
    --ghc-subtle:       #151b23;
    --ghc-ok:           #3fb950;
    --ghc-app-mark:     #f97583;
  }
}

:root[data-theme="dark"] .gh-consent {
  --ghc-canvas:       #010409;
  --ghc-card:         #0d1117;
  --ghc-border:       #3d444d;
  --ghc-border-soft:  #3d444d;
  --ghc-text:         #f0f6fc;
  --ghc-muted:        #9198a1;
  --ghc-link:         #4493f8;
  --ghc-green:        #238636;
  --ghc-green-border: rgba(240, 246, 252, .1);
  --ghc-on-green:     #d1d9e0;
  --ghc-btn:          #212830;
  --ghc-btn-border:   #3d444d;
  --ghc-subtle:       #151b23;
  --ghc-ok:           #3fb950;
  --ghc-app-mark:     #f97583;
}

/* The description that stands in for the picture, for anyone not looking at it. */
.gh-consent .gh-consent__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Root of the drawing. One font-size drives every dimension below. */
.gh-consent .gh-consent__ui {
  font-size: 11px;
  font-size: clamp(7px, 3.4cqi, 13px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
               Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: var(--ghc-text);
  background: var(--ghc-canvas);
  border: 1px solid var(--ghc-border);
  border-radius: .75em;
  padding: 1.6em 1.4em 1.4em;
  text-align: left;
  overflow: hidden;
}

.gh-consent .gh-consent__ui b { font-weight: 600; }
.gh-consent .gh-consent__ui svg { display: block; fill: currentColor; }

/* ---- badges joined by a dashed line ------------------------------------- */

.gh-consent .ghc-connect {
  position: relative;
  width: 72%;
  margin: 0 auto 1.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gh-consent .ghc-connect::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: .18em dashed var(--ghc-border);
}
.gh-consent .ghc-connect > * { position: relative; }

.gh-consent .ghc-badge {
  width: 3.2em; height: 3.2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ghc-card);
}
.gh-consent .ghc-badge--app {
  background: var(--ghc-app-mark);
  color: #ffffff;
}
.gh-consent .ghc-badge--gh { color: var(--ghc-text); }
.gh-consent .ghc-badge__glyph { width: 100%; height: 100%; }
.gh-consent .ghc-badge--app .ghc-badge__glyph { width: 88%; height: 88%; }

.gh-consent .ghc-tick {
  width: 1.9em; height: 1.9em;
  border-radius: 50%;
  background: var(--ghc-green);
  color: var(--ghc-on-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-consent .ghc-tick svg { width: 1.15em; height: 1.15em; }

.gh-consent .ghc-title {
  margin: 0 0 1.4em;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

/* ---- the card ----------------------------------------------------------- */

.gh-consent .ghc-card {
  background: var(--ghc-card);
  border: 1px solid var(--ghc-border);
  border-radius: .55em;
  overflow: hidden;
}
.gh-consent .ghc-card__body { padding: 1.2em; }

.gh-consent .ghc-app {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  column-gap: .8em;
  align-items: start;
  margin-bottom: .6em;
}
.gh-consent .ghc-app__avatar {
  grid-row: 1 / 3;
  width: 2.4em; height: 2.4em;
  border-radius: 50%;
  background: var(--ghc-subtle);
  border: 1px solid var(--ghc-border);
  color: var(--ghc-muted);
  font-size: 1em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-consent .ghc-app__name { line-height: 1.35; }
.gh-consent .ghc-app__sub {
  color: var(--ghc-muted);
  font-size: .88em;
  line-height: 1.35;
}
.gh-consent .ghc-link { color: var(--ghc-link); font-weight: 600; }

/* ---- permission rows ---------------------------------------------------- */

.gh-consent .ghc-perm {
  display: grid;
  grid-template-columns: 2.4em 1fr 1.4em;
  column-gap: .8em;
  align-items: center;
  padding: .7em 0;
}
.gh-consent .ghc-perm__icon {
  width: 1.9em; height: 1.9em;
  margin: 0 auto;
  color: var(--ghc-muted);
}
.gh-consent .ghc-perm__text { display: block; line-height: 1.3; min-width: 0; }
.gh-consent .ghc-perm__text b { display: block; }
.gh-consent .ghc-perm__text small {
  display: block;
  color: var(--ghc-muted);
  font-size: .88em;
}
.gh-consent .ghc-perm__chevron {
  width: 1.2em; height: 1.2em;
  color: var(--ghc-muted);
}

/* ---- organization access ------------------------------------------------ */

.gh-consent .ghc-orgs__title {
  margin: .5em 0 .8em;
  padding-top: .9em;
  border-top: 1px solid var(--ghc-border-soft);
  font-size: 1em;
  font-weight: 600;
}

.gh-consent .ghc-org {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-bottom: .55em;
}
.gh-consent .ghc-org__avatar {
  flex: none;
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  color: #ffffff;
  font-size: .82em;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-consent .ghc-org__avatar--hc { background: #ec3750; }
.gh-consent .ghc-org__avatar--tf { background: #6e7781; }
.gh-consent .ghc-org__name {
  color: var(--ghc-muted);
  font-size: .88em;
  font-weight: 600;
}
.gh-consent .ghc-org__state {
  width: 1.05em; height: 1.05em;
  color: var(--ghc-muted);
}
.gh-consent .ghc-org__state--ok { color: var(--ghc-ok); }
.gh-consent .ghc-org .ghc-btn--small { margin-left: auto; }

/* ---- buttons (static illustrations, not controls) ----------------------- */

.gh-consent .ghc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45em .9em;
  border: 1px solid var(--ghc-btn-border);
  border-radius: .5em;
  background: var(--ghc-btn);
  color: var(--ghc-text);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.gh-consent .ghc-btn--small { padding: .25em .7em; font-size: .85em; }
.gh-consent .ghc-btn--primary {
  background: var(--ghc-green);
  border-color: var(--ghc-green-border);
  color: var(--ghc-on-green);
}

.gh-consent .ghc-card__footer {
  padding: 1.1em 1.2em;
  border-top: 1px solid var(--ghc-border-soft);
  background: var(--ghc-card);
}
.gh-consent .ghc-actions {
  display: flex;
  gap: .6em;
}
.gh-consent .ghc-actions .ghc-btn { flex: 1 1 0; min-width: 0; }

.gh-consent .ghc-redirect {
  margin: .9em 0 0;
  color: var(--ghc-muted);
  font-size: .85em;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}
.gh-consent .ghc-redirect b { color: var(--ghc-text); }

/* ---- the three facts ---------------------------------------------------- */

.gh-consent .ghc-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9em;
  margin-top: .9em;
  padding: .9em 1em;
  background: var(--ghc-subtle);
  border: 1px solid var(--ghc-border);
  border-radius: .55em;
  color: var(--ghc-muted);
  font-size: .85em;
  line-height: 1.35;
}
.gh-consent .ghc-fact {
  display: block;
  position: relative;
  padding-left: 1.6em;
}
.gh-consent .ghc-fact svg {
  position: absolute;
  left: 0; top: .18em;
  width: 1.15em; height: 1.15em;
}

/* Under roughly 15rem there is no room for three columns; stack instead. */
@container (max-width: 15rem) {
  .gh-consent .ghc-facts { grid-template-columns: 1fr; gap: .5em; }
}

/* It is a picture of a screen, not a screen. Selecting its text invites the
 * reader to treat it as real UI, and a stray drag leaves it highlighted. */
.gh-consent, .gh-consent * { user-select: none; -webkit-user-select: none; }