/* ============================================================
   ARIA — Signature framework components
   The Niche of Lights · The Mīzān · The Council of 15 · The Loop
   Grounded in the cognitive substrates, expressed with restraint.
   ============================================================ */

/* ---------- shared: editorial section label ---------- */
.sig-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: 9px;
}
.sig-label::before { content: ""; width: 22px; height: 1px; background: var(--lamp-line); }
.arabic { font-family: var(--serif); }

/* ============================================================
   THE NICHE  ·  five intensifying strata (Ayat an-Nur stack)
   ============================================================ */
.niche {
  position: relative; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 30%, rgba(242,200,121,0.07), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg-2));
  box-shadow: var(--shadow-lg);
}
.niche-cap {
  padding: 22px 30px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.niche-cap .t { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-2); }
.niche-cap .src { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-4); text-transform: uppercase; }

.stratum {
  position: relative; display: grid; grid-template-columns: 232px 1fr; gap: 28px;
  padding: 26px 30px 26px 34px; border-top: 1px solid var(--line);
  transition: background .5s var(--ease);
}
.stratum:first-of-type { border-top: 0; }
/* left luminous seam, colored per stratum */
.stratum::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px;
  background: var(--seam, var(--line-2)); opacity: .5; transition: opacity .5s, box-shadow .5s;
}
.stratum.lit::before { opacity: 1; box-shadow: 0 0 22px -2px var(--seam); }
.stratum.lit { background: linear-gradient(90deg, color-mix(in srgb, var(--seam) 7%, transparent), transparent 55%); }

.stratum .s-id {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4); display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.stratum .s-id .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--seam); transition: box-shadow .5s; }
.stratum.lit .s-id .dot { box-shadow: 0 0 12px var(--seam); }
.stratum .s-name { font-family: var(--serif); font-size: 25px; line-height: 1.05; color: var(--ink); letter-spacing: -0.01em; }
.stratum .s-gloss { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); margin-top: 5px; }

.stratum .s-layer { font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.stratum .s-layer .arq { color: var(--ink-3); font-weight: 400; }
.stratum .s-desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.62; margin-top: 8px; max-width: 560px; }
.stratum .s-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.stratum .s-chips span {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; background: var(--bg-2);
}
@media (max-width: 720px){
  .stratum { grid-template-columns: 1fr; gap: 14px; padding: 22px 22px 22px 26px; }
}

/* ============================================================
   THE MĪZĀN  ·  every claim is weighed
   ============================================================ */
.mizan {
  border: 1px solid var(--line); border-radius: 18px; padding: 40px 32px 30px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); position: relative; overflow: hidden;
}
.mizan-stage { position: relative; height: 230px; display: flex; justify-content: center; }
/* pivot post */
.mizan-post { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 2px; height: 120px; background: linear-gradient(var(--line-strong), var(--line)); }
.mizan-base { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,0.10), transparent); }
.mizan-fulcrum { position: absolute; bottom: 138px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 20px var(--lamp-glow); z-index: 3; }
/* the beam */
.mizan-beam {
  position: absolute; bottom: 144px; left: 50%; width: 460px; max-width: 78%; height: 3px;
  background: linear-gradient(90deg, var(--green-line), var(--line-strong), var(--amber-line));
  transform-origin: center; transform: translateX(-50%) rotate(var(--tilt, -5deg));
  transition: transform 1s var(--ease); border-radius: 2px; z-index: 2;
}
.mizan-beam .hang { position: absolute; top: 0; width: 1px; height: 34px; background: var(--line-2); }
.mizan-beam .hang.l { left: 4%; } .mizan-beam .hang.r { right: 4%; }
/* pans */
.mizan-pan {
  position: absolute; bottom: 0; width: 230px; max-width: 42%;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2);
  padding: 14px 16px; transition: transform 1s var(--ease);
}
.mizan-pan.l { left: 2%; transform: translateY(var(--pan-l, 14px)); }
.mizan-pan.r { right: 2%; transform: translateY(var(--pan-r, 46px)); }
.mizan-pan h6 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 9px; }
.mizan-pan.l h6 { color: var(--green); }
.mizan-pan.r h6 { color: var(--amber); }
.mizan-pan ul { margin: 0; padding: 0; list-style: none; }
.mizan-pan li { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; padding: 4px 0 4px 16px; position: relative; }
.mizan-pan.l li::before { content: "✓"; position: absolute; left: 0; color: var(--green); }
.mizan-pan.r li::before { content: "—"; position: absolute; left: 0; color: var(--ink-4); }
@media (max-width: 620px){
  .mizan-stage { height: auto; flex-direction: column; gap: 12px; }
  .mizan-post, .mizan-base, .mizan-fulcrum, .mizan-beam { display: none; }
  .mizan-pan { position: relative; width: 100%; max-width: 100%; left: auto; right: auto; transform: none !important; }
}
/* claim selector */
.mizan-claims { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.mizan-claim {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 13px; background: var(--panel-2); transition: .16s;
}
.mizan-claim:hover { border-color: var(--line-strong); color: var(--ink); }
.mizan-claim.active { background: var(--lamp-glow); border-color: var(--lamp-line); color: var(--lamp); }
.mizan-now { text-align: center; margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-2); min-height: 24px; }

/* ============================================================
   THE COUNCIL  ·  Qiyas-15 — fifteen perspectives
   ============================================================ */
.council { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 880px){ .council { grid-template-columns: 1fr; } }
.council-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 520px){ .council-roster { grid-template-columns: repeat(2,1fr); } }
.seat {
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); cursor: pointer;
  padding: 12px 12px; transition: .16s var(--ease); position: relative;
}
.seat:hover { border-color: var(--line-strong); background: var(--panel-2); }
.seat.active { border-color: var(--lamp-line); background: var(--lamp-glow); }
.seat .n { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); letter-spacing: 0.08em; }
.seat .who { font-size: 12.5px; color: var(--ink); font-weight: 500; margin-top: 4px; line-height: 1.2; letter-spacing: -0.01em; }
.seat.active .who { color: var(--lamp); }

.council-panel {
  position: sticky; top: 84px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); padding: 26px 26px 24px; min-height: 280px;
}
.council-panel .cp-seat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lamp); display:flex; align-items:center; gap:9px; }
.council-panel .cp-q { font-family: var(--serif); font-size: 23px; line-height: 1.22; color: var(--ink); margin: 16px 0 0; letter-spacing: -0.01em; }
.council-panel .cp-q .quote { color: var(--ink-4); }
.council-panel .cp-divider { height: 1px; background: var(--line); margin: 20px 0; }
.council-panel .cp-alabel { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; }
.council-panel .cp-a { font-size: 14.5px; color: var(--ink-2); line-height: 1.62; }
.council-panel .cp-a b { color: var(--ink); font-weight: 600; }
.council-panel .cp-receipt {
  margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--green);
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--green-line);
  background: var(--green-dim); border-radius: 7px; padding: 7px 11px;
}
.council-panel .cp-receipt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* ============================================================
   THE LOOP  ·  Hamza's decision cadence
   ============================================================ */
.loop { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.loop-step { flex: 1; min-width: 140px; padding: 22px 20px; border-right: 1px solid var(--line); position: relative; transition: background .4s; }
.loop-step:last-child { border-right: 0; }
.loop-step .ls-n { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.1em; }
.loop-step .ls-sub { font-family: var(--serif); font-size: 19px; color: var(--ink); margin-top: 8px; letter-spacing: -0.01em; }
.loop-step .ls-en { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.loop-step.lit { background: linear-gradient(180deg, var(--lamp-glow), transparent); }
.loop-step.lit .ls-sub { color: var(--lamp); }
@media (max-width: 760px){ .loop-step { border-right: 0; border-bottom: 1px solid var(--line); } .loop-step:last-child { border-bottom: 0; } }

/* ---------- pull quote / verse line ---------- */
.verse {
  font-family: var(--serif); font-size: clamp(22px, 3.2vw, 34px); line-height: 1.34; letter-spacing: -0.012em;
  color: var(--ink); max-width: 920px; font-weight: 300;
}
.verse .lamp { color: var(--lamp); font-style: italic; }
.verse .em { font-style: italic; }
.verse-cite { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-top: 22px; }

/* Owner directive 2026-06-04: remove diagram dots + residual glows */
.stratum .s-id .dot { display: none !important; }
.council-panel .cp-receipt::before { display: none !important; }
.mizan-fulcrum { box-shadow: none !important; width: 9px; height: 9px; }