/* Asked of God, and what came of it (docs/answered-prayers-plan.md). Builds
 * on characters.css and god-questions.css; this adds the request cards, the
 * outcome labels, the outcome chart's colors and the waits. */
:root{--ag-tied:#2669fc;--ag-follows:#a4750d;--ag-none:#c8bda9}
html[data-theme="dark"]{--ag-tied:#4f74c9;--ag-follows:#b39a2a;--ag-none:#5a5344}

/* The six outcomes, defined. */
.ag-defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:14px 0 18px}
.ag-defs div{padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.ag-defs dt{font:600 14px/1.4 var(--sans);color:var(--ink)}
.ag-defs dd{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* The chart: tied, following, and no outcome told. */
.ag-f-said{fill:var(--ag-tied)}
.ag-f-follows{fill:var(--ag-follows)}
.ag-f-none{fill:var(--ag-none)}
.pp-key.ag-k-said{background:var(--ag-tied)}
.pp-key.ag-k-follows{background:var(--ag-follows)}
.pp-key.ag-k-none{background:var(--ag-none)}

/* A request: who asks, the words, what came of it, and the text's own tie. */
.ag-reqs{display:grid;gap:10px;margin:14px 0 22px}
.ag-req{padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:0 8px 8px 0;background:var(--card)}
.ag-req:target{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.ag-req p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ag-req p+p{margin-top:8px}
.ag-req q,.ag-table q,.ag-untold q,.ag-psalms q{quotes:"\201C" "\201D";color:var(--ink);font-family:var(--serif);font-size:15.5px}
.ag-who{font-weight:600;color:var(--ink)}
.ag-then{display:block}
.ag-tie,.ag-note{font-size:13px !important;color:var(--ink-3) !important}
.ag-untold .ag-note{display:block;margin-top:2px;font-size:12.5px;line-height:1.5}

/* Outcome and tie labels. */
.ag-chip{display:inline-block;margin-right:4px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--card-2);font:600 11px/1.7 var(--sans);letter-spacing:.02em;color:var(--ink-2);vertical-align:1px;white-space:nowrap}
.ag-o-granted,.ag-o-another{color:var(--ink)}
.ag-o-refused{border-style:dashed}
.ag-l-said{border-color:var(--ag-tied);background:color-mix(in srgb,var(--ag-tied) 12%,var(--card-2));color:var(--ink)}
.ag-l-follows{border-color:var(--ag-follows);background:color-mix(in srgb,var(--ag-follows) 12%,var(--card-2));color:var(--ink)}

/* How long: each wait, with its arithmetic under it. */
.ag-waits li{line-height:1.55}
.ag-wait{display:inline-block;margin-right:6px;font-weight:600;color:var(--ink)}
.ag-math{display:block;margin-top:2px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* The table: the quotation under its summary. */
.ag-table td:nth-child(3),.ag-table td:nth-child(4){min-width:300px}
.ag-q{display:block;margin-top:4px}
.ag-table .ag-chip{margin:0 0 2px}
.ag-for{max-width:760px}
.ag-conv .pp-rank{display:inline-block;min-width:18px;margin-right:4px}
.ag-editorial-break{box-sizing:border-box;width:min(100%,1040px);margin:34px auto 42px}
.ag-editorial-break img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:10px;box-shadow:0 16px 34px rgba(54,41,25,.1)}
.ag-editorial-break figcaption{margin:9px auto 0;padding:0 12px;color:var(--ink-3);font:italic 13px/1.5 var(--serif);text-align:center}

@media (max-width:600px){
  .ag-defs{grid-template-columns:1fr}
  .ag-req{padding:12px 14px}
  .ag-req q,.ag-table q,.ag-untold q,.ag-psalms q{font-size:15px}
  .ag-chip{white-space:normal}
  .ag-editorial-break{margin:24px auto 30px}
  .ag-editorial-break img{border-radius:8px}
  .ag-editorial-break figcaption{font-size:12.5px}
}

/* Editorial finish for outcomes and request records. */
.people-page .ag-defs{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:18px 0 24px
}
.people-page .ag-defs div{
  position:relative;
  min-height:122px;
  padding:20px 18px 17px;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(150deg,var(--card) 42%,var(--card-2));
  box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 3%,transparent)
}
.people-page .ag-defs div::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--accent)
}
.people-page .ag-defs dt{
  color:var(--accent);
  font:400 20px/1.25 var(--serif)
}
.people-page .ag-defs dd{margin-top:9px;line-height:1.6}
.people-page .ag-reqs{gap:14px;margin:18px 0 28px}
.people-page .ag-req{
  padding:20px 22px 18px;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;
  background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card-2) 48%,var(--card)));
  box-shadow:0 12px 30px color-mix(in srgb,var(--ink) 3%,transparent)
}
.people-page .ag-req:target{
  border-left-color:var(--go);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)
}
.people-page .ag-req p{font-size:14.5px;line-height:1.7}
.people-page .ag-req p+p{margin-top:12px}
.people-page .ag-who{
  margin-right:2px;
  color:var(--accent);
  font:400 20px/1.25 var(--serif)
}
.people-page .ag-asks{color:var(--ink-2)}
.people-page :is(.ag-req,.ag-table,.ag-untold,.ag-psalms) q{
  color:var(--ink);
  font-size:17px;
  line-height:1.55
}
.people-page .ag-then{
  padding-top:13px;
  border-top:1px solid var(--line)
}
.people-page .ag-chip{
  padding:2px 9px;
  line-height:1.65;
  letter-spacing:.035em
}
.people-page .ag-tie{
  padding-left:13px;
  border-left:2px solid color-mix(in srgb,var(--ag-tied) 62%,var(--line))
}
.people-page .ag-note{
  padding:10px 12px;
  border-radius:6px;
  background:color-mix(in srgb,var(--card-2) 72%,transparent)
}
.people-page .ag-waits{
  margin-top:18px;
  padding:0;
  list-style-position:inside
}
.people-page .ag-waits li{
  padding:12px 14px;
  border-bottom:1px solid var(--line)
}
.people-page .ag-waits li:nth-child(odd){background:color-mix(in srgb,var(--card) 60%,transparent)}
.people-page .ag-wait{color:var(--accent);font-family:var(--serif);font-size:17px;font-weight:400}
.people-page .ag-editorial-break img{
  border:1px solid color-mix(in srgb,var(--line-2) 76%,transparent);
  box-shadow:0 18px 42px color-mix(in srgb,var(--ink) 8%,transparent)
}
.people-page .ag-for{max-width:none}

@media (max-width:900px){
  .people-page .ag-defs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .people-page .ag-defs{grid-template-columns:1fr;gap:10px}
  .people-page .ag-defs div{min-height:0;padding:17px 17px 15px}
  .people-page .ag-req{padding:18px 16px 16px}
  .people-page .ag-who{display:block;margin-bottom:4px;font-size:22px}
  .people-page :is(.ag-req,.ag-table,.ag-untold,.ag-psalms) q{font-size:16px}
  .people-page .ag-chip{margin-top:3px}
}