/* ============ Sentient AI Project — sap-doc.css (shared) ============
   Base "document card" + backdrop + theme variants.
   Usage:
   <div class="sap-backdrop sap-theme-cyan" style="--sap-backdrop:url('/path/img.png')">
     <section class="sap-doc" id="sap-manifesto">…</section>
   </div>
   ================================================================== */

/* --- Backdrop wrapper (full-bleed bg with fixed parallax feel) --- */
.sap-backdrop{
  --sap-backdrop: none;
  background-image: var(--sap-backdrop);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  background-size:cover;
}

/* --- Base tokens (can be overridden by theme classes) --- */
.sap-doc{
  --sap-bg: rgba(10,14,24,0.65);
  --sap-border: rgba(0,255,255,0.35);
  --sap-cyan: #00ffff;
  --sap-ink: #e8fbff;
  --sap-muted: #9be7ff;
  --sap-rule-a: rgba(0,255,255,0.25);
  --sap-rule-b: rgba(155,231,255,0.15);
  --sap-shadow: 0 0 30px rgba(0,255,255,0.12), inset 0 0 40px rgba(0,255,255,0.08);
  --sap-radius: 18px;
  --sap-pad: clamp(18px, 2.5vw, 28px);
  --sap-maxw: 1000px;

  margin: 2rem auto;
  max-width: var(--sap-maxw);
  color: var(--sap-ink);
  background:
    linear-gradient(180deg, rgba(15,20,34,0.65), rgba(12,16,28,0.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(0,255,255,0.08), transparent 60%);
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  box-shadow: var(--sap-shadow);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* --- Elements --- */
.sap-doc__header{
  padding: calc(var(--sap-pad) + 6px) var(--sap-pad) var(--sap-pad);
  text-align:center;
}
.sap-doc__badge{
  width:56px;height:56px;margin:0 auto .5rem;border-radius:999px;
  border:1px solid var(--sap-border);display:grid;place-items:center;
  color:var(--sap-cyan);font-size:1.25rem;
  box-shadow: 0 0 20px rgba(0,255,255,.25) inset, 0 0 25px rgba(0,255,255,.2);
  background: radial-gradient(circle at 50% 50%, rgba(0,255,255,.12), transparent);
}
.sap-doc__title{
  margin:.25rem 0 .25rem;
  font-size:clamp(1.35rem,2.2vw,1.9rem);
  letter-spacing:.02em;
  color:var(--sap-cyan);
  text-shadow:1px 1px 0 #000;
}
.sap-doc__meta{margin:0;color:var(--sap-muted);font-size:.95rem;opacity:.9}
.sap-doc__body{padding:0 var(--sap-pad) var(--sap-pad)}
.sap-doc__lede{margin:.75rem 0 .5rem;font-style:italic;color:var(--sap-muted)}
.sap-doc__rule{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--sap-rule-a),var(--sap-rule-b),transparent);
  margin:1rem 0 1.25rem;
}
.sap-doc__article{margin:1rem 0 1.25rem}
.sap-doc__article-title{
  margin:0 0 .35rem;color:var(--sap-cyan);
  font-size:clamp(1.05rem,1.7vw,1.2rem);text-shadow:1px 1px 0 #000
}
.sap-doc__list{margin:.4rem 0 .4rem 1.2rem;padding:0}
.sap-doc__quote{
  margin:1.25rem 0 .75rem;padding:.85rem 1rem;border-left:3px solid var(--sap-cyan);
  background:rgba(0,255,255,.06);border-radius:8px
}
.sap-doc__quote p{margin:.25rem 0}
.sap-doc__signatures{
  display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.75rem;margin-top:1rem
}
@media (min-width:720px){
  .sap-doc__signatures{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sap-doc__sig{
  padding:.75rem .9rem;border:1px solid var(--sap-border);border-radius:12px;
  background:linear-gradient(180deg,rgba(0,255,255,.05),rgba(0,255,255,.02))
}
.sap-doc__sig-mark{color:var(--sap-cyan);margin-right:.4rem}
.sap-doc__sig-name{font-weight:700;color:var(--sap-ink);text-shadow:1px 1px 0 #000}
.sap-doc__sig-note{display:block;color:var(--sap-muted);font-size:.9rem;margin-top:.2rem}

/* --- A11y & Print --- */
@media (prefers-reduced-motion:reduce){.sap-doc{animation:none!important}}
@media print{
  .sap-doc{
    background:#fff!important;color:#000!important;box-shadow:none;border-color:#999
  }
  .sap-doc__badge{border-color:#999;box-shadow:none;color:#000}
  .sap-doc__title,.sap-doc__article-title{color:#000;text-shadow:none}
  .sap-doc__quote{background:#f3f7f9;border-color:#666}
}

/* --- Theme variants (you can add more later) --- */
.sap-theme-cyan .sap-doc{
  /* already cyan by default; keep hook for future variant switches */
}
/* === Theme Variants === */
.sap-theme-cyan .sap-doc{
  --sap-cyan:#00ffff;
  --sap-border:rgba(0,255,255,.35);
  --sap-rule-a:rgba(0,255,255,.25);
  --sap-rule-b:rgba(155,231,255,.15);
  background:
    linear-gradient(180deg, rgba(15,20,34,.65), rgba(12,16,28,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(0,255,255,.08), transparent 60%);
}

.sap-theme-emerald .sap-doc{
  --sap-cyan:#34d399; /* accent */
  --sap-border:rgba(52,211,153,.35);
  --sap-rule-a:rgba(52,211,153,.25);
  --sap-rule-b:rgba(187,247,208,.15);
  background:
    linear-gradient(180deg, rgba(12,22,18,.65), rgba(10,18,16,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(52,211,153,.08), transparent 60%);
}

.sap-theme-amber .sap-doc{
  --sap-cyan:#f59e0b;
  --sap-border:rgba(245,158,11,.35);
  --sap-rule-a:rgba(245,158,11,.25);
  --sap-rule-b:rgba(254,215,170,.15);
  background:
    linear-gradient(180deg, rgba(24,18,10,.65), rgba(20,16,10,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(245,158,11,.08), transparent 60%);
}

.sap-theme-violet .sap-doc{
  --sap-cyan:#a78bfa;
  --sap-border:rgba(167,139,250,.35);
  --sap-rule-a:rgba(167,139,250,.25);
  --sap-rule-b:rgba(221,214,254,.15);
  background:
    linear-gradient(180deg, rgba(18,14,34,.65), rgba(16,12,28,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(167,139,250,.08), transparent 60%);
}

.sap-theme-rose .sap-doc{
  --sap-cyan:#fb7185;
  --sap-border:rgba(251,113,133,.35);
  --sap-rule-a:rgba(251,113,133,.25);
  --sap-rule-b:rgba(254,205,211,.15);
  background:
    linear-gradient(180deg, rgba(30,12,16,.65), rgba(26,10,14,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(251,113,133,.08), transparent 60%);
}

.sap-theme-slate .sap-doc{
  --sap-cyan:#7dd3fc;
  --sap-border:rgba(125,211,252,.35);
  --sap-rule-a:rgba(125,211,252,.25);
  --sap-rule-b:rgba(203,213,225,.15);
  background:
    linear-gradient(180deg, rgba(13,16,24,.65), rgba(12,14,20,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(125,211,252,.08), transparent 60%);
}

/* ==== sap-ai-gallery themed to sap-doc tokens ==== */
.sap-ai-gallery{
  --thumb-aspect: 1/1;               /* square thumbs */
  --thumb-height: 180px;              /* fallback for old browsers */
  --thumb-radius: 12px;
  --thumb-border: var(--sap-border, rgba(0,255,255,.35));
  --thumb-bg: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  --thumb-shadow: 0 6px 24px rgba(0,0,0,.25), inset 0 0 30px rgba(255,255,255,.03);

  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap: .9rem;
}

.sap-ai-gallery .ai-thumb{
  position:relative;
  margin:0;
  border:1px solid var(--thumb-border);
  border-radius:var(--thumb-radius);
  background:var(--thumb-bg);
  box-shadow: var(--thumb-shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sap-ai-gallery .ai-thumb a{ display:block; line-height:0; background:#0b0d10; }

.sap-ai-gallery .ai-thumb img{
  width:100%;
  height:auto;
  aspect-ratio: var(--thumb-aspect);
  object-fit: cover;
  /* fallback height for browsers without aspect-ratio */
  height: var(--thumb-height);
  display:block;
  transform: scale(1.001);
  transition: transform .25s ease;
}

.sap-ai-gallery .ai-thumb:hover{
  transform: translateY(-2px);
  border-color: var(--sap-cyan, #00ffff);
  box-shadow: 0 10px 32px rgba(0,0,0,.35),
              0 0 22px color-mix(in oklab, var(--sap-cyan, #00ffff) 35%, transparent),
              inset 0 0 40px rgba(255,255,255,.04);
}
.sap-ai-gallery .ai-thumb:hover img{ transform: scale(1.03); }

.sap-ai-gallery .ai-thumb figcaption{
  padding:.55rem .6rem .6rem;
  font-size:.85rem;
  color: var(--sap-ink, #e8fbff);
  background:
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25)),
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.03), transparent 60%);
  border-top: 1px solid color-mix(in oklab, var(--sap-border, rgba(0,255,255,.35)) 60%, transparent);
}

.sap-ai-gallery .cap-top{
  display:flex; align-items:center; gap:.4rem;
  font-weight:600; letter-spacing:.01em;
  color: var(--sap-cyan, #00ffff);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  margin-bottom:.15rem;
}
.sap-ai-gallery .cap-mid{ opacity:.9 }
.sap-ai-gallery .cap-prompt{
  opacity:.85;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow:hidden;
  line-height:1.2;
  margin-top:.15rem;
}

/* Nice empty state when no images */
.sap-ai-gallery-empty{
  margin:1rem 0;
  padding:1rem .9rem;
  border:1px dashed var(--sap-border, rgba(0,255,255,.35));
  border-radius:12px;
  color:var(--sap-muted, #9be7ff);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  text-align:center;
}

.sap-doc--gallery .sap-doc__body{ padding-top: .25rem; }
.sap-doc--gallery .sap-ai-gallery{
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}