/* ============================================================
   About + Sign In For More — "Forged Lantern". About: vision card (lead, numbered
   points, closing line — SITE_TEXT.about, ui/about.js) next to the message form,
   which stays in view while the page scrolls; one column ≤1000px. Sign In For More:
   feature tiles + a Sign In button. See docs/subsystems/about-ui.md.
   Cursors: never a bare value (CLAUDE.md §4).
   ============================================================ */

.abGrid{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.abGrid .panel{ margin: 0; }
.abSide{ display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(84px / var(--ui-zoom, 1)); }
.abVision h2, .abContact h2, #aboutDonatePanel h2{ margin: 0 0 6px; }
.abLead{ margin: 6px 0 18px; color: var(--c-text); font: 500 1.2rem/1.55 var(--f-display); }
.aboutText p.abLead{ color: var(--c-text); font-size: 1.2rem; line-height: 1.55; margin: 6px 0 18px; }
.abPoints{ display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
.aboutText .abPoints p{
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 14px 16px;
  border-radius: var(--r-md, 14px); border: 1px solid var(--c-line); background: hsl(var(--h) 16% 8% / .6);
  color: var(--c-dim); font: 500 .95rem/1.6 var(--f-body);
}
.abPoints i{
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink, #10140f); font: 700 .9rem var(--f-display); font-style: normal;
}
.aboutText p.abPromise{
  margin: 0; padding: 16px 18px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-md, 14px) var(--r-md, 14px) 0;
  background: hsl(var(--h) 30% 92% / .06); color: var(--c-text); font: 600 1rem/1.6 var(--f-body);
}
.abFeed{ margin: 4px 0 12px; color: var(--c-text); font: 500 .95rem/1.6 var(--f-body); }
#aboutScreen .panel .hint{ border: 0; padding: 0; margin: 0 0 12px; }
.aboutContactMessage{
  display: block; width: 100%; box-sizing: border-box; min-height: 160px; resize: vertical; padding: 12px 14px;
  font: 500 1rem/1.5 var(--f-body);
}
.aboutContactRow{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
.aboutContactRow button{ flex: 0 0 auto; width: auto; }
.aboutContactRow .hint{ flex: 1 1 140px; margin: 0; }
.aboutContactCount{ margin-left: auto; color: var(--c-dim); font: 600 .8rem var(--f-body); font-variant-numeric: tabular-nums; }
.aboutContactOk{ color: var(--accent-hi) !important; }
.aboutContactErr{ color: var(--c-danger, #e0624e) !important; }
#aboutContactSignedOut button{ width: auto; }
.aboutDonateBtn{
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 0 22px; text-decoration: none;
  border-radius: var(--r-md, 14px); background: var(--btn-fill, var(--accent)); color: var(--accent-ink, #10140f);
  font: 700 .85rem var(--f-display); letter-spacing: .04em; text-transform: uppercase; cursor: var(--cur-click, pointer);
}
@media (max-width: 1000px){
  .abGrid{ grid-template-columns: 1fr; }
  .abSide{ position: static; }
}
@media (max-width: 640px){
  .abLead, .aboutText p.abLead{ font-size: 1.05rem; }
}

/* ---------- Sign In For More ---------- */
.sgCard{ max-width: calc(1100px / var(--ui-zoom, 1)); }
.sgTiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 16px; }
.sgTile{ display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-md, 14px); border: 1px solid var(--c-line); background: hsl(var(--h) 16% 8% / .6); }
.sgTile b{ font: 700 1.25rem var(--f-display); }
.sgTile p{ margin: 0; color: var(--c-dim); font: 500 .95rem/1.55 var(--f-body); }
.sgIc{ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #10140f); }
.sgIc .i{ width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sgCta{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 6px; }
.sgCta button{ width: auto; }
#signInMoreScreen .hint{ border: 0; padding: 0; margin: 0 0 4px; }
.sgCta .hint{ margin: 0; }
.sgTiles{ margin: 14px 0 18px; }
#signInMoreScreen .hint{ margin: 0 0 14px; }
.abLead, .aboutText p.abLead{ margin-top: 12px; }