/* ==========================================================================
   The Lumen app demonstration: the two set-piece surfaces.
   The architecture drawn in type and hairlines, and the unlock chain.
   Both are typographic by rule: the architecture diagram uses no imagery,
   and the worn credential is never depicted anywhere on this site.
   Depends on /assets/lumen.css tokens and on styles/app.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The architecture diagram, in type
   -------------------------------------------------------------------------- */
.apx-arch{border:1px solid var(--hair);background:var(--ink-3);min-inline-size:640px}
.apx-arch__cap{
  padding:12px 18px;border-block-end:1px solid var(--hair);
  font:400 9px/1.7 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--paper-3);
}
.apx-arch__row{display:grid;grid-template-columns:repeat(5,1fr)}
.apx-arch__cell{padding:clamp(14px,2vh,22px) 8px;text-align:center;border-inline-start:1px solid var(--hair)}
.apx-arch__cell:first-child{border-inline-start:0}
.apx-arch__cell .who{font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-2)}
.apx-arch__cell .what{display:block;margin-block-start:4px;font:400 9px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3)}
.apx-arch__drop{display:grid;grid-template-columns:repeat(5,1fr);block-size:34px}
.apx-arch__drop i{position:relative;display:block}
.apx-arch__drop i::before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;inline-size:1px;background:var(--hair-strong)}
.apx-arch__row--clones .apx-arch__cell{border-block:1px solid var(--hair)}
.apx-arch__row--clones .who{color:var(--teal)}
.apx-arch__talk{position:relative;text-align:center;padding-block:14px}
.apx-arch__talk::before{
  content:"";position:absolute;inset-block-start:50%;inset-inline:clamp(28px,8vw,110px);block-size:1px;
  background:linear-gradient(90deg,transparent,var(--teal-deep) 18%,var(--teal-deep) 82%,transparent);
}
.apx-arch__talk span{
  position:relative;background:var(--ink-3);padding-inline:16px;
  font:400 9px/1.6 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--teal);
}
.apx-arch__core{padding:clamp(24px,4vh,40px) 18px;text-align:center;border-block-start:1px solid var(--hair-strong);position:relative}
.apx-arch__core::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline:0;block-size:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  box-shadow:0 0 16px rgba(90,214,198,.45);
}
.apx-arch__core .h3{letter-spacing:.24em;text-transform:uppercase}
.apx-arch__core .micro{display:block;margin-block-start:10px}
:lang(ar) .apx-arch__cell .who,:lang(ar) .apx-arch__cell .what,
:lang(ar) .apx-arch__talk span,:lang(ar) .apx-arch__cap{letter-spacing:.03em}
:lang(ar) .apx-arch__core .h3{letter-spacing:.04em}

/* --------------------------------------------------------------------------
   2. The unlock chain: four proofs
   -------------------------------------------------------------------------- */
.ap-proofs{list-style:none;border-block-start:1px solid var(--hair)}
.ap-proof{
  display:grid;grid-template-columns:64px minmax(0,1fr) 30px;gap:clamp(12px,2vw,24px);
  align-items:start;padding-block:clamp(20px,3vh,30px);border-block-end:1px solid var(--hair);
  opacity:.55;transition:opacity .5s var(--ease-out);
}
.ap-proof.is-done{opacity:1}
.ap-proof__n{font:300 var(--t-h3)/1 var(--serif);color:var(--hair-strong);font-variant-numeric:tabular-nums}
.ap-proof.is-done .ap-proof__n{color:var(--teal-deep)}
.ap-proof__b h3{font:400 var(--t-h3)/1.3 var(--serif)}
.ap-proof__p,.ap-proof__n2{margin-block-start:12px;font-size:var(--t-small);max-inline-size:62ch}
.ap-proof__p{color:var(--paper-2)}
.ap-proof__n2{color:var(--paper-3)}
.ap-proof__p .micro,.ap-proof__n2 .micro{display:block;margin-block-end:5px}
.ap-proof__tick{
  inline-size:12px;block-size:12px;border:1px solid var(--hair-strong);margin-block-start:6px;
  transition:background .4s,border-color .4s,box-shadow .4s;
}
.ap-proof.is-done .ap-proof__tick{background:var(--teal);border-color:var(--teal);box-shadow:0 0 14px var(--teal-glow)}
/* Below the two-column threshold every child is placed by hand. Moving only the tick and
   leaving the other two to auto-placement pushed the body text into the 44px numeral column,
   which collapsed the proof to one word per line. */
@media(max-width:640px){
  .ap-proof{grid-template-columns:44px minmax(0,1fr);gap:6px 12px}
  .ap-proof__n{grid-column:1;grid-row:1}
  .ap-proof__b{grid-column:2;grid-row:1 / span 2}
  .ap-proof__tick{grid-column:1;grid-row:2;margin-block-start:8px;justify-self:start}
}
.ap-chain__note{margin-block-start:20px;font:400 9px/1.8 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3)}
:lang(ar) .ap-chain__note{letter-spacing:.03em}
/* The timing tiles carry a unit beside the numeral, so the figure runs one step smaller than
   the site's evidence register: at the full display size "100 ms" breaks across two lines. */
.ap-timing{margin-block-start:36px}
.ap-timing .ev-figure{font:300 clamp(38px,5.2vw,66px)/1 var(--serif);white-space:nowrap}

/* --------------------------------------------------------------------------
   3. The countersignature chain on the handover surface
   -------------------------------------------------------------------------- */
.ap-chain{margin-block-start:26px;padding:clamp(16px,2.4vw,24px);border:1px solid var(--hair);background:var(--ink-3)}
.ap-chain__l{list-style:none;margin-block-start:14px;display:grid;gap:0}
.ap-chain__l li{
  display:grid;grid-template-columns:34px minmax(0,1fr) 14px;align-items:center;gap:12px;
  padding-block:12px;border-block-start:1px solid var(--hair);
  color:var(--paper-3);font-size:var(--t-small);transition:color .4s;
}
.ap-chain__l li:first-child{border-block-start:0}
.ap-chain__l li.is-done{color:var(--paper)}
.ap-chain__n{font:400 9px/1 var(--mono);letter-spacing:.16em;color:var(--teal-deep)}
.ap-chain__tick{inline-size:10px;block-size:10px;border:1px solid var(--hair-strong);transition:background .4s,border-color .4s}
.ap-chain__l li.is-done .ap-chain__tick{background:var(--teal);border-color:var(--teal);box-shadow:0 0 12px var(--teal-glow)}

/* --------------------------------------------------------------------------
   4. The superseded-route panel
   -------------------------------------------------------------------------- */
.ap-sup__p{color:var(--paper-2);font-size:var(--t-body);max-inline-size:66ch}
.ap-sup__p + .ap-sup__p{margin-block-start:16px}
.ap-sup__list{list-style:none;margin-block-start:28px;border-block-start:1px solid var(--hair)}
.ap-sup__list li{border-block-end:1px solid var(--hair)}
.ap-sup__list a{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:14px;align-items:baseline;
  padding-block:15px;text-decoration:none;transition:background .25s;
}
.ap-sup__list a:hover{background:var(--ap-row)}
.ap-sup__list b{font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.ap-sup__list span{color:var(--paper-2);font-size:var(--t-small)}
@media(max-width:640px){.ap-sup__list a{grid-template-columns:1fr;gap:6px}}
:lang(ar) .ap-sup__list b{letter-spacing:.03em}