/*
 * TruthPower App Suite — shared stylesheet for the per-app pages.
 *
 * These eleven pages used to inline an identical copy of this block each. The copies
 * had already drifted, and the drift is what shipped 26 controls that looked like
 * buttons and did nothing: `.btn` and `.block` were given the SAME purple fill, and
 * only `cursor:default` distinguished a live control from a dead one — which is
 * invisible on a phone, where there is no cursor at all.
 *
 * The rule this file enforces: FILL MEANS IT WORKS.
 *   .btn   — filled, tappable, always has an href.
 *   .soon  — never filled, dashed outline, dim text. Cannot be mistaken for a control.
 * There is no third thing. A panel that does nothing must not borrow the button's skin.
 */

:root {
  --ink:#000000; --panel:#150a20;
  --btn:#12724F; --btn-hi:#158257; --btn-lo:#0A4E36;
  --gold:#e8b64c; --gold-hi:#f0c765;
  --text:#ffffff; --muted:#cfc3e0; --dim:#9186a6;
  --gap:12px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--ink); color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; }

.page { width:100%; max-width:760px; margin:0 auto;
  padding:14px 16px calc(40px + env(safe-area-inset-bottom)); }

.brand { display:flex; align-items:center; gap:14px; margin:0 0 16px; }
.brand img { display:block; height:auto; }
.brand .badge { width:clamp(90px,20vw,150px); flex:none; }
.brand .word  { flex:1 1 auto; min-width:0; max-width:420px; }

.btn {
  display:flex; align-items:center; justify-content:center;
  min-height:64px; padding:16px 14px; border:0; border-radius:8px;
  background:
    radial-gradient(58px 13px at 19% 17%, rgba(228,255,245,.90) 0%, rgba(228,255,245,0) 100%),
    radial-gradient(30px 11px at 32% 14%, rgba(192,255,229,.74) 0%, rgba(192,255,229,0) 100%),
    radial-gradient(40px 13px at 78% 17%, rgba(208,255,237,.78) 0%, rgba(208,255,237,0) 100%),
    radial-gradient(22px 9px at 89% 31%, rgba(172,255,216,.60) 0%, rgba(172,255,216,0) 100%),
    radial-gradient(72% 14px at 50% 3px, rgba(72,242,172,.82) 0%, rgba(72,242,172,0) 100%),
    radial-gradient(62% 17px at 50% 100%, rgba(30,202,136,.44) 0%, rgba(30,202,136,0) 100%),
    linear-gradient(90deg, #01100A 0%, rgba(1,16,10,0) 11%, rgba(1,16,10,0) 89%, #01100A 100%),
    linear-gradient(180deg, #2FC08A 0%, #17855C 14%, var(--btn) 26%, #0D5B3F 42%, #0A4E36 58%, #073C29 76%, #041F14 90%, #010F09 100%);
  box-shadow:
    inset 0 1px 0 rgba(225,255,245,.75),
    inset 0 0 0 1px rgba(1,18,11,.95),
    inset 0 -8px 16px rgba(0,8,5,.82),
    inset 0 10px 20px rgba(60,235,165,.14);
  color:#fff;
  font-size:clamp(17px,2.2vw,21px); font-weight:600;
  text-align:center; line-height:1.3;
  text-decoration:none; cursor:pointer;
}
.btn:hover {
  background:
    radial-gradient(62px 15px at 19% 17%, rgba(240,255,250,.96) 0%, rgba(240,255,250,0) 100%),
    radial-gradient(33px 13px at 32% 14%, rgba(210,255,238,.82) 0%, rgba(210,255,238,0) 100%),
    radial-gradient(44px 15px at 78% 17%, rgba(224,255,244,.85) 0%, rgba(224,255,244,0) 100%),
    radial-gradient(25px 10px at 89% 31%, rgba(190,255,228,.68) 0%, rgba(190,255,228,0) 100%),
    radial-gradient(74% 16px at 50% 3px, rgba(96,255,190,.88) 0%, rgba(96,255,190,0) 100%),
    radial-gradient(64% 19px at 50% 100%, rgba(40,222,152,.52) 0%, rgba(40,222,152,0) 100%),
    linear-gradient(90deg, #02160E 0%, rgba(2,22,14,0) 11%, rgba(2,22,14,0) 89%, #02160E 100%),
    linear-gradient(180deg, #45D79C 0%, #1D9A6C 14%, var(--btn-hi) 26%, #0F6848 42%, #0C5A3E 58%, #08462F 76%, #052718 90%, #02160E 100%);
  box-shadow:
    inset 0 1px 0 rgba(240,255,250,.85),
    inset 0 0 0 1px rgba(2,22,14,.92),
    inset 0 -8px 16px rgba(0,10,6,.78),
    inset 0 10px 20px rgba(80,250,180,.20);
}
.btn:active {
  background:
    radial-gradient(34px 12px at 20% 26%, rgba(190,250,225,.36) 0%, rgba(190,250,225,0) 100%),
    radial-gradient(55% 16px at 50% 100%, rgba(30,190,128,.42) 0%, rgba(30,190,128,0) 100%),
    linear-gradient(90deg, #010A06 0%, rgba(1,10,6,0) 11%, rgba(1,10,6,0) 89%, #010A06 100%),
    linear-gradient(180deg, #02150D 0%, #06331F 22%, #084A32 46%, var(--btn-lo) 68%, #0B573C 100%);
  box-shadow:
    inset 0 5px 12px rgba(0,0,0,.78),
    inset 0 -1px 0 rgba(150,250,205,.22),
    inset 0 0 0 1px rgba(1,16,10,.95);
}
.btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* The one control that is on every page, and always goes to the same place. It is a
   real href, never history.back() — an installed home-screen app has no history to
   go back through on first launch, and that is exactly when somebody is most lost. */
.nav { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 var(--gap); }
.nav .btn { flex:1 1 auto; min-width:200px; min-height:56px; font-size:17px; }
.home { background:var(--gold); color:#1a0d28; font-weight:800; }
.home:hover  { background:var(--gold-hi); }
.home:active { background:#d8a63c; }
.up { background:transparent; box-shadow:inset 0 0 0 1px #17855C; color:var(--text); font-weight:600; }
.up:hover  { background:rgba(18,114,79,.18); }
.up:active { background:rgba(18,114,79,.3); }

h1 { margin:0 0 var(--gap); padding:16px 18px; border-radius:8px;
  background:
    radial-gradient(58px 13px at 19% 17%, rgba(228,255,245,.90) 0%, rgba(228,255,245,0) 100%),
    radial-gradient(30px 11px at 32% 14%, rgba(192,255,229,.74) 0%, rgba(192,255,229,0) 100%),
    radial-gradient(40px 13px at 78% 17%, rgba(208,255,237,.78) 0%, rgba(208,255,237,0) 100%),
    radial-gradient(22px 9px at 89% 31%, rgba(172,255,216,.60) 0%, rgba(172,255,216,0) 100%),
    radial-gradient(72% 14px at 50% 3px, rgba(72,242,172,.82) 0%, rgba(72,242,172,0) 100%),
    radial-gradient(62% 17px at 50% 100%, rgba(30,202,136,.44) 0%, rgba(30,202,136,0) 100%),
    linear-gradient(90deg, #01100A 0%, rgba(1,16,10,0) 11%, rgba(1,16,10,0) 89%, #01100A 100%),
    linear-gradient(180deg, #2FC08A 0%, #17855C 14%, var(--btn) 26%, #0D5B3F 42%, #0A4E36 58%, #073C29 76%, #041F14 90%, #010F09 100%);
  box-shadow:
    inset 0 1px 0 rgba(225,255,245,.75),
    inset 0 0 0 1px rgba(1,18,11,.95),
    inset 0 -8px 16px rgba(0,8,5,.82),
    inset 0 10px 20px rgba(60,235,165,.14);
  text-align:center;
  font-size:clamp(20px,2.6vw,26px); font-weight:800; }

.lede { margin:0 0 var(--gap); padding:0 2px; color:var(--muted);
  font-size:16.5px; line-height:1.6; }

.opens { display:flex; flex-direction:column; gap:var(--gap); margin:0 0 var(--gap); }
.opennote { margin:-4px 0 0; padding:0 2px; color:var(--dim); font-size:14.5px; }

/* NOT A BUTTON, and it must never read as one: no fill, dashed edge, dim text. */
.soon {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:64px; padding:16px 14px; border-radius:8px;
  background:transparent; border:1px dashed rgba(160,119,207,.55);
  color:var(--dim); font-size:16px; font-weight:600;
  text-align:center; line-height:1.4; cursor:default;
}
.soon.big { min-height:110px; gap:7px; font-size:19px; color:var(--muted); }
.soon span { font-size:15px; font-weight:400; color:var(--dim); }