/* The placeholder view (§6.12) — centred tile, title, sentence, back button. */

.stub {
  max-width: 420px;
  margin: 72px auto;
  text-align: center;
}

.stub__tile {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--p-brand-soft);
  color: var(--p-brand);
}

.stub__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 8px;
}

/* The unavailability sentence, above the description of what will live here.
   Carries more weight than the description below it — a reader who takes one
   line from this screen must take THIS one, not the feature blurb. */
.stub__unavailable {
  font-size: 13px; line-height: 1.55; font-weight: 600;
  color: var(--p-ink); margin: 0 0 8px;
}

.stub__body {
  font-size: 13px; line-height: 1.55; color: var(--p-ink-2);
  margin: 0 0 20px;
}

.stub__back { text-decoration: none; }
.stub__back:hover { text-decoration: none; color: var(--p-on-brand); }

/* ---- Blocked-on-backend screens ----
   Wider and denser than a placeholder: this one has to explain itself. */
.blocked { max-width: 560px; margin: 56px auto; }
.blocked__tile {
  width: 52px; height: 52px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--p-warn-soft); color: var(--p-warn);
}
.blocked__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px;
}
.blocked__lead { font-size: 13px; color: var(--p-ink-2); margin: 0 0 20px; }
.blocked__facts { margin: 0 0 18px; }
.blocked__facts dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--p-ink-3);
  margin-top: 16px;
}
.blocked__facts dd {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--p-ink-2);
}
.blocked__note {
  font-size: 11.5px; line-height: 1.55; color: var(--p-ink-3);
  border-inline-start: 2px solid var(--p-line-2); padding-inline-start: 12px;
  margin: 0 0 20px;
}
.blocked__back { text-decoration: none; }
.blocked__back:hover { text-decoration: none; color: var(--p-on-brand); }

/* ---- Choosing between grants ---- */
.grant__list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 20px; }
.grant__option {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; box-sizing: border-box; text-align: start;
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-md); padding: 12px 14px;
  color: inherit; font-family: inherit; cursor: pointer;
}
.grant__option:hover { border-color: var(--p-brand); }
.grant__engagement { font-size: 13px; font-weight: 600; }
.grant__scope { font-size: 11.5px; color: var(--p-ink-2); }
.grant__id { font-size: 10.5px; color: var(--p-ink-3); }